Перечислять элементы стиля CSS, используя JavaScript

Question

Прежде всего, JavaScript определенно не мой родной язык. Тем не менее, мне было поручено создать веб-страницу, где пользователь может использовать палитру цветов для изменения элементов CSS. Затем их необходимо отправить обратно на сервер для хранения в базе данных. Пока все работает, кроме последней части, потому что я застрял, читая нужные элементы.

Использование приведенного ниже кода прекрасно работает для любых элементов с одним словом, таких как color, но не работает для любых переносов, таких как background-color, которые возвращают undefined. Я проверил это на соответствие ряду других элементов.

Есть идеи, почему это не удается, желательно с предложениями по его устранению? Кроме того, у вас есть фрагмент кода, который работает для этой цели?

function Save(form) {
var cssRules;
var Q = "";

for (var S = 0; S < document.styleSheets.length; S++){
    if (document.styleSheets[S]['rules']) {
        cssRules = 'rules';
    } else if (document.styleSheets[S]['cssRules']) {
        cssRules = 'cssRules';
    }

    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
        if (document.styleSheets[S][cssRules][R].selectorText == '.event') {
            Q += "+bc=" + document.styleSheets[S][cssRules][R].style['color'] + "+bb=" + document.styleSheets[S][cssRules][R].style['background-color'];
        }
        // Similar code for other elements goes here
    }
}

form.css.value = Q;
form.submit();
}

Пример раздела таблицы стилей CSS:

.event {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    text-decoration: line-through;
    color: red;
    background-color: #ffff99;
    height:20px;
    width:20px;
}

Это тот элемент HTML, для которого мне нужны значения таблицы стилей:

<td class="event">11</td>

Answer 1

Это потому, что в Javascript, как и в других языках, дефис не является допустимым символьным символом.Когда вы используете строки в качестве индексов, например,

style["background-color"]

- это то же самое, что и

style.background-color 

, что недопустимо, для доступа к свойствам css через дефис необходимо удалить дефис и заглавные буквыследующий символ, например

style.backgroundColor; // or style["backgroundColor"];

Answer 2

Чтобы добавить ответ @ Francisco, в JavaScript свойство объекта может содержать любую строку. Однако, если он содержит символы, недопустимые для именования переменных, к нему нельзя получить доступ с помощью оператора ., и к нему необходимо получить доступ с помощью []. Крайний пример использования таких символов будет:

var o = { "◀▶": "hello!" };
o["◀▶"]; // hello!

Однако мы не можем написать o.◀▶, так как это повысит SyntaxError, поскольку эти символы Юникода не являются допустимыми именами идентификаторов. Тем не менее, обратите внимание, что символы юникода могут использоваться в именах идентификаторов и действительны в соответствии с ECMAScript 5-е издание. но только для определенных классов категорий Юникод. Чтобы можно было написать :

var o = {};
o.Π = "hello world";
o.Π; // "hello world"

См. Раздел 7.6 Имена и идентификаторы идентификаторов в документации по 3-му изд. или 5-е изд. для получения дополнительной информации о допустимых именах идентификаторов.

Свойство style элементов DOM является объектом CSSStyleDeclaration и может управляться несколькими способами. Будучи хост-объектом, некоторые браузеры могут предоставлять больше функций, чем другие. В браузерах Webkit (Chrome и Safari) вы можете использовать нотацию [] для установки свойств стиля, используя их имена CSS2.

document.body.style['background-color'] = "#CCC";

Интерфейс для CSSStyleDeclaration содержит метод setProperty, который также можно использовать для установки этих свойств:

interface CSSStyleDeclaration {
    ...
    void setProperty(in DOMString propertyName, 
                     in DOMString value, 
                     in DOMString priority)
            raises(DOMException);
    ...
}

Используя setProperty, мы могли бы написать:

document.body.style.setProperty("background-color", "orange", null);

Мы можем использовать getPropertyValue, чтобы получить текущее значение, используя его имя CSS2:

document.body.style.getPropertyValue("background-color");

Наконец, как уже упоминалось в других ответах, вы всегда можете использовать интерфейс CSS2Properties для удобного доступа к свойствам CSS для объекта стиля. Они эквивалентны вызову setProperty и getPropertyValue для объекта стиля с соответствующим именем свойства. Из spec (содержит имена для всех свойств, которые должны предоставляться этим интерфейсом):

Интерфейс CSS2Properties представляет собой удобный механизм для извлечения и установки свойств в CSSStyleDeclaration. Атрибуты этого интерфейса соответствуют всем свойствам, указанным в CSS2. Получение атрибута этого интерфейса эквивалентно вызову метода getPropertyValue интерфейса CSSStyleDeclaration. Установка атрибута этого интерфейса эквивалентна вызову метода setProperty интерфейса CSSStyleDeclaration.

В любом браузере, который поддерживает этот интерфейс (он не требуется), мы можем запросить / обновить объект стиля, например:

document.body.style.backgroundColor = "black";

или

document.body.style["backgroundColor"] = "black";

См. примеры для всего вышеперечисленного.

Answer 3

Чтобы установить свойства CSS в JavaScript, вам нужно использовать camelCase для дефисных свойств.Например:

/* CSS */
background-color: red;

/* JS */
element.style.backgroundColor = 'red';