6

開発者が指定したdiv要素の幅が欲しいです。を書くと、指定したかどうかに関係なく、$('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で指定できるため、私が見ることができる問題が1つあります。

#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 に答える