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没有类的 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 中。你可以通过创建一个元素来解决这个问题，将其放置在可见屏幕之外，并将其附加到正文（或任何地方）。

要获得可以使用的高度.height()，或者.innerHeight()要获得没有边距和边框但包括填充的高度：

var elem = $('<span />', {'class':'box',
                          style:'position:fixed;top:-9999px'}).appendTo('body');

var height = elem.innerHeight();

elem.remove();

小提琴

通常不需要为此访问和解析样式表，除非在非常特殊的情况下，您不是在寻找元素高度之类的东西，而是尝试检查是否在特定样式表中设置了某些特殊样式等。

于 2013-05-27T19:00:39.313 回答
0

不使用 DOM 元素的唯一方法是下载样式表并解析内容。您还可以通过转到document.stylesheets并找到规则来访问已编译的样式表。您还可以使用window.getComputedStyle(element)和创建一个元素，例如document.createElement('div')并将“.box”类名附加到它。

请记住，这样做意味着样式表与您的 html 文件所在的域和端口相同。

于 2013-05-27T18:47:04.620 回答