我正在寻找一种方法,使用jQuery返回第一个匹配元素的计算样式对象.然后我可以将此对象传递给另一个jQuery的css方法调用.
例如,对于宽度,我可以执行以下操作以使2个div具有相同的宽度:
$('#div2').width($('#div1').width());
如果我可以使文本输入看起来像现有的跨度,那将是很好的:
$('#input1').css($('#span1').css());
其中.css()没有参数返回一个可以传递给.css(obj)的对象.
(我找不到这个jQuery插件,但它似乎应该存在.如果它不存在,我将把我的下面变成一个插件并发布它与我使用的所有属性.)
基本上,我想伪克隆某些元素,但使用不同的标记.例如,我有一个我要隐藏的li元素,并在其上放置一个看起来相同的输入元素.当用户键入时,看起来他们正在内联编辑元素.
我也对这种用于编辑的伪克隆问题的其他方法持开放态度.有什么建议？
这就是我现在拥有的.唯一的问题是获得所有可能的样式.这可能是一个荒谬的长名单.
jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
if (arguments.length) return jQuery.fn.css2.apply(this, arguments);
var attr = ['font-family','font-size','font-weight','font-style','color',
'text-transform','text-decoration','letter-spacing','word-spacing',
'line-height','text-align','vertical-align','direction','background-color',
'background-image','background-repeat','background-position',
'background-attachment','opacity','width','height','top','right','bottom',
'left','margin-top','margin-right','margin-bottom','margin-left',
'padding-top','padding-right','padding-bottom','padding-left',
'border-top-width','border-right-width','border-bottom-width',
'border-left-width','border-top-color','border-right-color',
'border-bottom-color','border-left-color','border-top-style',
'border-right-style','border-bottom-style','border-left-style','position',
'display','visibility','z-index','overflow-x','overflow-y','white-space',
'clip','float','clear','cursor','list-style-image','list-style-position',
'list-style-type','marker-offset'];
var len = attr.length, obj = {};
for (var i = 0; i < len; i++)
obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
return obj;
}
编辑:我现在已经使用上面的代码一段时间了.它运行良好,行为与原始css方法完全相同,只有一个例外:如果传递0个args,则返回计算出的样式对象.
正如您所看到的,如果适用的话,它会立即调用原始的css方法.否则,它将获取所有列出属性的计算样式(从Firebug的计算样式列表中收集).虽然它获得了很长的值列表,但速度非常快.希望它对其他人有用.
说,我有以下CSS类:
.upComing{ background:#ccc; font-weight:bold; }
在我的HTML中,我有一个表,其中某些行应用了该类,如下所示:
<table>
<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
<tr class='upComing'> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
<tr class='upComing'> <td></td> <td></td> </tr>
</table>
到目前为止,这么好,但是通过JavaScript我有事件听td点击,我想得到行的颜色(我知道我可以得到行的类,但在这种情况下,我需要能够得到来自班级的颜色).
我需要这样做,因为表可以导出到excel文件,如果它们在CSS类上,行颜色不会应用于excel文件,我想在发送html之前将这种颜色应用于每个td到excel发电机.
PS:这个表是从我们创建的jQuery插件动态生成的,它仍然是一个正在进行中的工作,但是当我们对它充满信心时,我们将为公众发布它.
- 更新 - 这是关于这个主题的更新,确实有一个纯粹的javascript解决方案,我不得不深入研究jQuery的源代码来检查这一点.这是解决方案:
1)指向所需的元素
var tr = $("tr.upComing").first()[0];
2)获得元素的COMPUTED STYLE
var css = window.getComputedStyle( tr );
3)获得COMPUTED STYLE的属性值
var color = css.getPropertyValue( "background-color" );
到目前为止,我只在Mac上测试了FF,Safari,Chromium和Opera,如果有人可以在IE上尝试这个并给我们反馈意见,那将是非常棒的.
我相信我已经测试了StackOverflow上所有可用的解决方案，但都没有在Chrome（72）中运行。我在W3C上遵循了规范，但一切似乎只能在FireFox中工作。
我只想做一个简单的事情-使用反增量将页码添加到打印的文档中。我尝试了HTML4和HTML5，但没有任何结果。
有什么解决办法吗？
Chrome版本：72.0.3626.81（官方内部版本）（64位）
解决方案在FireFox中运行良好：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
</style>
<body>
<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>
</body>
</html>
另一种解决方案（HTML5不支持@page）：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
截至2015年12月3日，主要浏览器似乎不支持@ bottom-center之类的边距框，如下所示。如果您搜索“ @ bottom-center”，则会看到很多红色的“不支持”框。当您搜索网络时，听起来好像它们可以工作，但实际上还不支持它们。分页媒体的某些元素可以很好地工作，例如分页之后，但页边距框却不能。– James Toomey 2015年12月3日20:40
相似的线程（旧的，Chrome没有分辨率）：
所以我正在阅读elem.style.width,并获得类似"3.1415926ex"的内容.
我想将其转换为"px".
JavaScript是否已内置函数来执行此操作？我宁愿砍掉最后2个字符串的字母,将其作为数字读取,然后乘以魔法常数.
谢谢!
我有一个简短的问题.如果我想比较一个样式左/右值和另一个坐标(比如鼠标)我该怎么做？
这是我尝试没有鼠标坐标,但由于某种原因,我的条件永远不会执行...
<style>
#container
{
position:absolute;
left:400px;
top:200px;
}
</style>
<script>
function moveExit(){
var containerId = document.getElementById("container").style;
if(containerId.left == 400 + "px")
containerId.left = 395 + "px";
}
</script>
这是我的身体:
<body>
<div id="container">
<img
src="Images/image.jpg"
onmouseover="moveExit();"
/>
</div>
</body>
这是我第一次玩javascript ..谢谢!