Mic*_*aul 188 javascript css
我知道我可以通过JavaScript 设置 CSS值,例如:
document.getElementById('image_1').style.top = '100px';
但是,我可以获得当前特定的样式值吗？我已经阅读了我可以获得元素的整个样式的地方,但是如果我不需要,我不想要解析整个字符串.
ale*_*lex 333
你可以用getComputedStyle().
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
Ami*_*edi 23
element.style属性只让您知道在该元素中定义为内联的CSS属性(以编程方式或在元素的style属性中定义),您应该获得计算出的样式.
不是那么容易以跨浏览器的方式做到这一点,IE有自己的方式,通过element.currentStyle属性,以及DOM Level 2标准方式,由其他浏览器实现的是通过document.defaultView.getComputedStyle方法.
这两种方式有所不同,例如,IE element.currentStyle属性期望您访问由camelCase中的两个或多个单词组成的CSS属性名称(例如maxHeight,fontSize,backgroundColor等),标准方式需要使用用短划线分隔的单词(例如max-height,font-size,background-color等).......
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(/([A-Z])/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;
}
}
小智 20
使用以下内容.它帮助了我.
document.getElementById('image_1').offsetTop
另请参阅获取样式.
kar*_*olf 15
在没有DOM操作的情况下检查CSS值的跨浏览器解决方案:
function get_style_rule_value(selector, style)
{
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];
}
}
}
};
用法:
get_style_rule_value('.chart-color', 'backgroundColor')
已清理的版本(强制选择器输入为小写,并允许用例不带前导".")
function get_style_rule_value(selector, style)
{
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];
}
}
}
}
}
}
Nis*_*hah 10
2021年
使用前检查
您可以使用computeStyleMap()
答案是有效的，但有时您需要检查它返回的单位，您可以在没有任何slice()或substring()字符串的情况下得到它。
var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');
var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');
var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);.jsCSS {
width: 10rem;
height: 10rem;
background-color: skyblue;
padding-left: 10px;
}如果以编程方式设置它,您可以将其称为变量(即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>