1

次のようにcssプロパティにアクセスしようとしています:

.box {
    position: absolute;
    background-color: red;
    height: 10px;
    width: 10px;
}

JS:

var height = $('.box').css('height');

上記のコードは間違っており.box、DOM で使用できないため、実際には機能しません。

私が試した別のこと：

var height = $("<span class='box'></span>").css('height');

.box私の質問は: class を使用して DOM に要素を持たずに高さを取得するにはどうすればよいboxですか?

4

3 に答える 3

2

最新のブラウザーではdocument.stylesheetsを使用できます。スタイルシートは元の HTML に含まれている必要があり、ソースはSame Origin Policyに一致する必要があります。つまり、Chrome 拡張機能などからスタイルシートを挿入することはできません。 document.stylesheets に表示

CSS

.box {
    position:absolute;
    background-color:red;
    height:10px;
    width:10px;
}

Javascript

function propertyFromStylesheet(selector, attribute) {
    var value;

    [].some.call(document.styleSheets, function (sheet) {
        return [].some.call(sheet.rules, function (rule) {
            if (selector === rule.selectorText) {
                return [].some.call(rule.style, function (style) {
                    if (attribute === style) {
                        value = rule.style.getPropertyValue(attribute);
                        return true;
                    }

                    return false;
                });
            }

            return false;
        });
    });

    return value;
}

console.log(propertyFromStylesheet(".box", "height"));

出力

10px

jsfiddleについて

于 2013-05-27T19:45:34.370 に答える
0

DOM 要素を使用せずに取得できる唯一の方法は、スタイルシートをダウンロードしてコンテンツを解析することです。document.stylesheetsルールにアクセスして見つけることで、コンパイル済みのスタイルシートにアクセスすることもできます。window.getComputedStyle(element)などの要素を使用して作成しdocument.createElement('div')、「.box」className をそれに添付することもできます。

これを行うことは、スタイルシートが同じドメインにあり、html ファイルがある場所のポートにあることを意味することに注意してください。

于 2013-05-27T18:47:04.620 に答える