Как получить весь CSS элемент

Сегодня я тестировал CSS-функции Javascript и заметил, что при использовании.style.cssText он дает мне только тот CSS-код, который я установил с помощью JS.

Вместо этого я хотел получить весь CSS для элементов, так что я предполагаю, что я делаю что-то не так или, возможно, мне нужна другая функция, например, getComputedStyle, но для всего CSS, а не для отдельных значений свойств, но я не могу найти то, что мне нужно при поиске.

Поэтому мой вопрос заключается в том, как я могу получить полный CSS из последней части моего кода, например:

background-color: #ffcccc; font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif; font-size: 13px; color: #ff0000;

вместо текущего более короткого CSS, который выводится?

<html>
<head>

<style type="text/css" media="screen">
    .MyDiv001 {
        background-color: #ffcccc;
        font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;
    }
    .MyDiv002 {
        background-color: #ccffcc;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    }
</style>

</head>

<body>

<div id="MyDiv001" class="MyDiv001">This is MyDiv001</div>
<div id="MyDiv002" class="MyDiv002">This is MyDiv002</div>
<br /><hr><br />

<script type="text/javascript">

// Select the MyDiv001 element
var MyDiv001 = document.getElementById("MyDiv001"); // Select MyDiv001

// Set some style property values for MyDiv001
MyDiv001.style.setProperty("font-size", "13px", null);
MyDiv001.style.setProperty("color", "#ff0000", null);

// Get the Computed Style for MyDiv001
var MyDiv001Style = window.getComputedStyle(MyDiv001);

// Show the MyDiv001 style property values
document.write( "MyDiv001 background-color = " + MyDiv001Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv001 font-family = " + MyDiv001Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv001 font-size = " + MyDiv001Style.getPropertyValue("font-size") + "<br /><br />");

// Select the MyDiv002 element
var MyDiv002 = document.getElementById("MyDiv002"); // Select MyDiv002

// Set some style property values for MyDiv002
MyDiv002.style.setProperty("font-size", "16px", null);
MyDiv002.style.setProperty("color", "#0000ff", null);

// Get the Computed Style for MyDiv002
var MyDiv002Style = window.getComputedStyle(MyDiv002); 

// Show the MyDiv002 style property values
document.write( "MyDiv002 background-color = " + MyDiv002Style.getPropertyValue("background-color") + "<br />");
document.write( "MyDiv002 font-family = " + MyDiv002Style.getPropertyValue("font-family") + "<br />");
document.write( "MyDiv002 font-size = " + MyDiv002Style.getPropertyValue("font-size") + "<br /><br />");

// Not what i was expecting
document.write( "MyDiv001 CSS = " + MyDiv001.style.cssText+ "<br />"); // How do i get the full css?
document.write( "MyDiv002 CSS = " + MyDiv002.style.cssText+ "<br />"); // How do i get the full css?

</script>

</body>
</html>

Изменить - я хотел бы получить ответ, который использует обычный Javascript, если это возможно, надеюсь, фиксированную версию моего кода и причину, по которой он не возвращает полный CSS, спасибо.

Источник

6 ответов

Решение

MyDiv001.style.cssText вернет только встроенные стили, которые были установлены style атрибут или свойство.

Вы можете использовать getComputedStyle для извлечения всех стилей, примененных к элементу. Вы можете перебрать возвращенный объект, чтобы сбросить все стили.

function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
  }
  return s;
}
Источник

Остерегайтесь этого getComputedStyleбуквально возвращает вычисленные значения. Значение относительных единиц, таких как em будет возвращено как вычисленное px значения (как видно на computed вкладка инструментов разработчика вашего браузера).

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

Недостаточно репутации для комментариев, поэтому этот отдельный ответ.

Источник

Это 2020 год, и мы, наконец, можем просто сделать

getComputedStyle(element).cssText

Пример:

newElement.style.cssText = getComputedStyle(element).cssText

Источник

Вот полезная функция для getComputedStyleчтобы получить все или отфильтрованные стили для данного селектора css элемента.

Источник

пусть divStyle1 = document.body.style.cssText; предупреждение (divStyle1);

Источник

Почему не просто

      `
const elt = document.querySelector("element");

function test(){
    console.dir(getComputedStyle(elt, null));
}

test();
`
Источник
Другие вопросы по тегам