使用JavaScript获取CSS值
我知道我可以通过JavaScript 设置一个CSS值，例如：
document.getElementById('image_1').style.top = '100px'; 但是，我可以获得当前特定的样式值吗？ 我已经阅读了哪里可以获得元素的整个样式，但是如果不需要，我不想分析整个string。
你可以使用getComputedStyle() 。
var element = document.getElementById('image_1'), style = window.getComputedStyle(element), top = style.getPropertyValue('top');
jsFiddle 。
element.style属性让你只知道被定义为内联的CSS属性（以编程方式或者在元素的style属性中定义），你应该得到计算的样式。
以跨浏览器的方式做起来并不那么容易，IE通过element.currentStyle属性和DOM Level 2标准方式有其自己的方式，其他浏览器通过document.defaultView.getComputedStyle方法实现。
这两种方式有所不同，例如，IE element.currentStyle属性期望您访问在camelCase（例如，maxHeight，fontSize，backgroundColor等）中由两个或更多个单词组成的CSS属性名称，标准方式期望具有用破折号分隔的单词（如最大高度，字体大小，背景色等）。 ……
function getStyle(el, styleProp) { var value, defaultView = (el.ownerDocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hyphen separated words eg. font-Size) styleProp = styleProp.replace(/([AZ])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^\d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; } }
主要参考stackoverflow
使用以下内容。 它帮助了我。
document.getElementById('image_1').offsetTop
另请参阅获取样式 。
跨浏览器解决scheme来检查CSS值，而无需DOM操作：
function getStyleRuleValue(style, selector) { for (var i = 0; i < document.styleSheets.length; i++) { var mysheet = document.styleSheets[i]; var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (var j = 0; j < myrules.length; j++) { if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) { return myrules[j].style[style]; } } } };
用法：
getStyleRuleValue('backgroundColor', '.chart-color')
消毒版本（将select器input强制为小写，并允许不带前导的使用情况。“）
function getStyleRuleValue(style, selector) { var selector_compare=selector.toLowerCase(); var selector_compare2= selector_compare.substr(0,1)==='.' ? selector_compare.substr(1) : '.'+selector_compare; for (var i = 0; i < document.styleSheets.length; i++) { var mysheet = document.styleSheets[i]; var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (var j = 0; j < myrules.length; j++) { if (myrules[j].selectorText) { var check = myrules[j].selectorText.toLowerCase(); switch (check) { case selector_compare : case selector_compare2 : return myrules[j].style[style]; } } } }
}
如果你以编程方式设置，你可以把它叫做variables（例如document.getElementById('image_1').style.top ）。 否则，你总是可以使用jQuery：
<html> <body> <div id="test" style="height: 100px;">Test</div> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> alert($("#test").css("height")); </script> </body> </html>
如果你在图书馆，为什么不MyLibrary和getStyle 。
jQuery的CSS方法是错误的，CSS只是设置样式的一种方式，并不一定代表元素的样式属性的实际值。
为了安全起见，您可能希望在尝试读取元素之前检查元素是否存在。 如果它不存在，你的代码将抛出一个exception，这将停止对你的JavaScript的其余部分的执行，并可能向用户显示错误消息 – 不好。 你希望能够优雅地失败。
var height, width, top, margin, item; item = document.getElementById( "image_1" ); if( item ) { height = item.style.height; width = item.style.width; top = item.style.top; margin = item.style.margin; } else { // Fail gracefully here }
上面给出的没有DOM操作的跨浏览器解决scheme不起作用，因为它给出了第一个匹配规则，而不是最后一个。 最后的匹配规则是适用的规则。 这是一个工作版本：
function getStyleRuleValue(style, selector) { let value = null; for (let i = 0; i < document.styleSheets.length; i++) { const mysheet = document.styleSheets[i]; const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules; for (let j = 0; j < myrules.length; j++) { if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) { value = myrules[j].style[style]; } } } return value; }
但是，这种简单的search在复杂的select器中不起作用。
