Js - добавить значение к элементу CSS

Question

Это выглядит так просто, но не работает (не определено).

Я установил переменную на <ul>, которая является дочерним элементом <div> элемента "feature_tabs_indicators". Функция pBoxShadowProperty получает свойство BoxShadow, поддерживаемое текущим браузером.

И последний оператор просто устанавливает pBoxShadowProperty в 0, то есть переопределяет свойство CSS set Box-Shadow.

Может кто-нибудь объяснить, что я делаю не так здесь в последнем утверждении?

Best

var iActiveNo = 0;
var eTabInd = document.getElementById ("feature_tabs_indicators").children[0];
var pBoxShadowProperty = getSupportedCSSproperty(["boxShadow", "mozBoxShadow", "webkitBoxShadow"]);

function getSupportedCSSproperty (propertyArray)
{
    var root = document.documentElement;
    for (var i = 0; i < propertyArray.length; i++)
    {
        if (typeof root.style[propertyArray[i]] === "string")
        {
            return propertyArray[i];
        }
    }
}

iActiveNo = iActiveNo + 1;
eTabInd.children[iActiveNo - 1].style[pBoxShadowProperty] = "";

Вот jsfiddle, нажмите светло-зеленую кнопку «справа» в правом верхнем углу.

Answer 1

Думаю, я понял, в чем твоя проблема.Вы используете здесь:

iActiveNo = iActiveNo + 1;

что-то, что не было определено в вашем размещенном коде.Однако у вас есть:

var iActive = 0;

, который, на мой взгляд, должен был быть:

var iActiveNo = 0;

в противном случае в вашем коде есть ошибка JS (в любом случае, если она опубликована).

Кроме этого (то есть, если вы намеревались извлечь 1-й элемент <li> из элемента <ul> и удалить его box-shadow свойство CSS) - ваш код в порядке.

Редактировать

Чувак, что за беспорядок .. :) Вот JSFiddle Я немного исправил.Ниже приведено объяснение.

В JSFiddle происходит несколько вещей, которые необходимо исправить, прежде чем мы перейдем к реальной проблеме.

У вас есть ошибки в этой скрипке - см. Консоль.Строка:

var pBackgroundColorProperty = eStyle.backgroundColor //[pBoxShadowProperty];

не заканчивается точкой с запятой, а затем интерпретируется как функция из-за (..) на следующей строке (я думаю) - что (по крайней мере для меня) приводит кв ошибке в консоли JS.Если точка с запятой добавлена ​​- ошибка исчезла.

Дополнительно ... Есть строка:

console.log (eTabInd.children[iActiveNo-1].style.pBoxShadowProperty);

, которая печатает ваш undefined и это именно то, что былообсуждается ниже и должно быть

console.log (eTabInd.children[iActiveNo-1].style[pBoxShadowProperty]);

, которое затем печатает пустую строку.

Кроме того, при печати ваша переменная pBoxShadowProperty содержит строку boxShadow.Что, конечно, не является допустимым свойством CSS, с которым я знаком.Так что это:

eTabInd.children[iActiveNo - 1].style[pBoxShadowProperty] = "";

ничего не сделает.

Теперь к сути проблемы здесь ...

eTabInd.children[iActiveNo-1].style

не имеет 'Свойство box-shadow 'для начала, потому что вы не поместили его в атрибут style элемента <li>.Он добавляется к элементу <li> через преимущества этой последовательности селекторов CSS: #feature_tabs_indicators ul #ind_bt.

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

То, что вы могли бы сделать, - это создать другой класс, у которого нет свойства box-shadow, и заменить его своим исходным c_ind.

Answer 2

похоже, что вы неправильно установили значение, как и должно быть

eTabInd.children[iActiveNo - 1].style.pBoxShadowProperty = "";

Доза, которая помогает, или доза все еще возвращает 0?