Пример кода стиля CSS для получения элемента в Javascript

Существует четыре способа использования CSS для управления страницей, а именно встроенный стиль (встроенный стиль), встроенный стиль, стиль ссылки и импортированный стиль.

Встроенные стили (встроенные стили) прописываются в атрибуте style в теге html, например <div></div>

Встроенные стили записываются в теге style, например <style type="text/css">div{width:100px height:100px</style>;

Тип ссылки заключается в использовании тега ссылки для представления файла CSS, например <link href="test.css" type="text/css" rel="stylesheet" />

Метод импорта заключается в использовании импорта для представления файлов CSS, таких как @import url("test.css").

Если вы хотите использовать JavaScript для получения информации о стиле элемента, первое, что приходит на ум, — это атрибут стиля элемента. Однако атрибут style элемента представляет только встроенный стиль элемента. Если часть информации о стиле элемента записана во встроенном стиле, а часть записана во внешнем файле CSS, полная информация о стиле элемента не может быть получена. можно получить через атрибут style. Поэтому вам необходимо использовать вычисленный стиль элемента, чтобы получить информацию о стиле элемента.

Используйте метод getComputedStyle объекта окна, чтобы получить рассчитанный стиль элемента. Этот метод имеет два параметра. Первый параметр — это элемент, расчетный стиль которого должен быть получен. Второй параметр может быть нулевым, пустой строкой или псевдо-. class (например: before,:after), оба параметра являются обязательными.

Давайте приведем пример

<style type="text/css">

#testDiv{

граница: 1 пиксель, сплошной красный;

ширина: 100 пикселей;

высота: 100 пикселей;

цвет: красный;

}

</стиль>

<div id="testDiv"></div>

var testDiv = document.getElementById("testDiv");

var ComputedStyle = window.getComputedStyle(testDiv, "");

вар ширина = вычисляемый стиль.ширина //100 пикселей;

вар высота = вычисленныйStyle.height //100px;

вар цвет = вычисленныйStyle.color; //rgb(255, 0, 0)

[/код]

Примечание. Все полученные атрибуты цвета возвращаются в формате rgb(#,#,#).

В настоящее время, если вы используете testDiv.style для получения информации о стиле, testDiv.style.width определенно будет пустым.

Метод getComputedStyle не реализован в IE8 и более ранних версиях, но каждый элемент в IE имеет собственное свойство currentStyle.

Итак, давайте возьмем общий

Скопируйте код кода следующим образом:

var testDiv = document.getElementById("testDiv");

вар styleInfo = window.getComputedStyle? window.getComputedStyle(testDiv, ""): testDiv.currentStyle;

вар ширина = styleInfo.width //100px;

вар высота = styleInfo.height; //100px;

вар цвет = styleInfo.color // rgb(255, 0, 0)

Наконец, обратите внимание, что рассчитанный стиль элемента доступен только для чтения. Если вы хотите установить стиль элемента, вы должны использовать атрибут style элемента (это настоящая цель атрибута style элемента). .