Javascript получить стиль CSS для идентификатора - PullRequest
Новая
       0

Javascript получить стиль CSS для идентификатора

1 голос
/ 16 февраля 2012

Я хотел бы иметь возможность получить стиль от элемента CSS, который не используется на веб-странице. Например, это страница: 

<html>
<head>
<style type="text/css">
#custom{
background-color: #000;
}
</style>
</head>

<body>
<p>Hello world</p>
</body>
</html>

Как вы можете видеть, идентификатор 'custom' имеет значение, но не используется в документе. Я хотел бы получить все значения для «пользовательских», не используя его на странице. Самое близкое, что я пришел, это: 

el = document.getElementById('custom');
var result;
var styleProp = 'background-color';
if(el.currentStyle){
    result = el.currentStyle[styleProp];
    }else if (window.getComputedStyle){
    result = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    }else{
    result = "unknown";
}

Ответы [ 2 ]

5 голосов
/ 16 февраля 2012

Создайте новый элемент с заданным идентификатором и добавьте его в документ. Затем просто прочитайте значение и удалите элемент.

Пример: 

var result,
    el = document.body.appendChild(document.createElement("div")),
    styleProp = 'background-color',
    style;

el.id = 'custom';
style = el.currentStyle || window.getComputedStyle(el, null);
result = style[styleProp] || "unknown";

// Remove the element
document.body.removeChild(el);
1 голос
/ 22 марта 2018

Я не думаю, что ответ был очень хорошим, поскольку он требует добавления элементов в DOM, которые могут нарушить то, что вы пытаетесь сделать, или создать визуальные сбои.может получить менее инвазивное решение.(см. здесь )

попробуйте что-то вроде: 

var result;
var SS = document.styleSheets;
for(var i=0; i<SS.length; i++) {
    for(var j=0; j<SS[i].cssRules.length; j++) {
        if(SS[i].cssRules[j].selectorText == "#custom") {
            result = SS[i].cssRules[j].style;
        }
    }
}

Это должно дать вам объект, который будет содержать все стили в качестве ключей.имейте в виду, что вам может потребоваться более сложный алгоритм, если стиль переопределен в таблицах стилей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...