Question

我想要一个由开发人员指定的div元素的宽度。表示如果你写$('body').width()，它会为你提供 px 的宽度，无论你是否指定了它。

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

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

Answer 1

<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>

可能与get CSS rule's percentage value in jQuery或Getting values of global stylesheet in jQuery

重复

Answer 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" );

小提琴here

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

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

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

Answer 3

对于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;
}

Answer 4

document.getElementById('divid').style.width

Answer 5

您可以使用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

我怎样才能获得用CSS编写的div的宽度

5 个答案: