我正在尝试使用Javascript获取继承的CSS属性的值.我找不到全面的答案.
CSS示例:
div {
width: 80%;
}
示例标记:
<div id="mydiv"> Some text </div>
使用javascript(jQuery或native),我需要得到元素的宽度 - 不是像素,而是字符串"80%".
$('#mydiv').css('width'); // returns in px
$('#mydiv')[0].style.width // empty string
getComputedStyle($('#mydiv')[0]).width // returns in px
我需要将值作为字符串的原因是因为我需要将样式复制到另一个元素.如果它被声明为百分比,则另一个值必须是百分比.如果它以px声明,则另一个值需要以px为单位.
真正的诀窍是这个属性可以被继承,而不是在元素上显式声明(如我的例子中所示).
有没有人有任何想法？
根据这个问题页面和这里接受的答案，通过Javascript获取继承的CSS值的正确方法是getComputedStyle()。但是，这在以下示例中不起作用：
<!DOCTYPE html>\n<html lang="en">\n<body>\n <form id="iterateThroughMe">\n <div class="notHidden"><input name="myNum" type="number" /></div>\n <div><input name="myOtherNum" type="number" /></div>\n <input name="myText" type="text" />\n <div id="hider" style="display: none;">\n <input name="hiddenElement" type="number" />\n </div>\n </form>\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>\n <script>\n var inputs = $("#iterateThroughMe").find(\'input\');\n for(var i = 0; i<inputs.length; i++) {\n var displayStyle = window.getComputedStyle(inputs[i], null).display;\n console.log(\n (($(inputs[i]).is(":hidden"))?"in":"")+\n "visible element: ",inputs[i],"has display style",displayStyle);\n }\n </script>\n</body>\n</html>\n保存并在浏览器中打开，在控制台上可以看到以下内容：
\n\nvisible element: <input name=\xe2\x80\x8b"myNum" type=\xe2\x80\x8b"number">\xe2\x80\x8b has display style inline-block\nvisible element: <input name=\xe2\x80\x8b"myOtherNum" type=\xe2\x80\x8b"number">\xe2\x80\x8b has …