6

我想要开发人员指定的 div 元素的宽度。意味着如果你写，它会以px$('body').width()为单位为你提供宽度，无论你是否指定了它。

我需要在 CSS/JavaScript 中指定的 div 的宽度，但不是由 jQuery 计算的（实际上没有指定但被继承）。

如果没有指定宽度，那么我需要知道。

4

5 回答 5

2 
<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script>
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

可能与在 jQuery 中获取 CSS 规则的百分比值或在 jQuery中获取全局样式表的值重复

于 2012-10-26T11:24:31.380 回答
2

下面的代码将遍历所有样式表以及匹配元素的样式属性。此函数将返回一个宽度数组。

function getCSSWidths( id ) {

    var stylesheets = document.styleSheets;
    var widths = [];
    var styleWidth;

    // loop through each stylesheet
    $.each( stylesheets, function( i, sheet ) {

        var len = ( sheet.rules.length || sheet.cssRules.length );
        var rules = sheet.rules || sheet.cssRules;

        // loop through rules
        for (var i=0; i < len; i++) {

            var rule = rules[i];

            // if width is specified in css add to widths array
            if (rule.selectorText.toLowerCase() == "#" + id.toLowerCase() ) {
                widths.push( rule.style.getPropertyValue("width"));
            }
        }
    });

    var el = document.getElementById( id );

    // get width specified in the html style attribute
    if( el && el.style && el.style.width ) {
        widths.push( el.style.width );
    }

    return widths;
}

getCSSWidths( "test" );

在这里提琴

尽管可以在 selectorText 中指定多个选择器，但我可以看到一个问题，即

#id1, #id2, .class1 {
    // properties
}

在这些情况下，作为参数传入的 id 将与 selectorText 属性不匹配。也许有人可以想出一个匹配指定 id 的正则表达式:)

于 2012-10-26T12:53:23.643 回答
1

对于Javascript指定的宽度，你可以试试这个：

document.getElementById("myDivElement").style.width

如果上面返回一个空字符串，则表示它没有被 Javascript 指定。

对于通过 CSS 指定的规则，找到元素的类名，然后找到为该类指定的规则：

var className = document.getElementById("myDivElement").className;

var cssWidth = getWidthFromClassname(className);

现在您需要定义getWidthFromClassname：

function getWidthFromClassname(className)
{
    var reqWidth;
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
             reqWidth = classes[x].style.getPropertyValue("width");
             break;
        }
    }

    return reqWidth;
}
于 2012-10-26T11:34:50.697 回答
0 
document.getElementById('divid').style.width
于 2012-10-26T11:22:11.723 回答
0

您可以使用该clientWidth属性，它计算元素的实际宽度，无论是通过 CSS 设置还是文档的自然流动：

document.getElementById('divId').clientWidth

如果您想要带有边距/填充/边框的完整内容宽度，您可以使用offsetWidth：

document.getElementById('divId').offsetWidth

https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

于 2012-10-26T11:25:26.777 回答