2

如果我想读取 javacript 中的不透明度值，我可以使用

element.style.opacity

但如果我想要 fontSize 我必须使用下面的函数。

function findFontSize( element_id )
{
    var element = document.getElementById( element_id );  
    // var theCSSprop = element.style.fontSize; // Does not work  
    // var theCSSprop = element.getPropertyValue("font-size"); // Does not work
    var theCSSprop = window.getComputedStyle( element, null ).getPropertyValue("font-size");  // This works
    alert( theCSSprop ); 
}

有关的

http://jsfiddle.net/tUc5v/

为什么是这样？

4

1 回答 1

2

显式定义的 CSS 样式和继承的样式有不同的语法。我猜测（尽管您的 jsfiddle 与问题不匹配）正在显式设置不透明度，但 fontSize 是继承的。

更新：找到这个旧评论，以为我会多给一点......

如果一个元素没有在样式表或内联中明确定义的样式，那么它将回退到无法通过该element.style.property方式访问的计算样式。

另一个区别是，样式对象上的显式样式是驼峰式，而计算样式是连字符大小写。

另外需要注意的是，通过样式对象访问的属性比 window.getComputedStyle（或 document.defaultView.getComputedStyle）快 3 到 4 倍。

这是一个可以为任何样式执行此操作的基本功能（它不检查不正确的输入等。）

/**
 * 
 * @param el Element
 * @param CSS property in hyphen case 
 * @param pseudo pseudo selector (optional, e.g. '::before')
 */
function getStyleValue(el, property, pseudo) {
    // convert hyphen-case to camelCase
    const elStyle = el.style[property.replace(/(\-[a-z])/g, $1 =>  $1.toUpperCase().replace('-',''))];
    return ((elStyle !== '' && !pseudo) 
        ? elStyle
        : window.getComputedStyle(el, pseudo).getPropertyValue(property));
}
于 2012-05-12T18:17:52.460 回答