CODEWITHSUNDEEP
javascriptcss
Kayote
Kayote

Reputation: 15647

Js - Append a value to element CSS

This seems so simply yet its not working (undefined).

I have set a var to <ul> which is a child of <div> element "feature_tabs_indicators". The pBoxShadowProperty function gets the BoxShadow property supported by the current browser.

And the final statement merely sets the pBoxShadowProperty to 0, i.e. its overriding the CSS set Box-Shadow property.

Can someone please explain what I am doing wrong here in the last statement?

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] = "";

Here is the jsfiddle, press the light green button 'rght' on top right.

Upvotes: 0

Views: 142

Answers (2)

ZenMaster
ZenMaster

Reputation: 12746

I think I figured out what your issue is. You use here:

iActiveNo = iActiveNo + 1;

something that has not been defined in your posted code. However you do have:

var iActive = 0;

which I think should have actually been:

var iActiveNo = 0;

otherwise your code has JS error in it (as it is posted, anyway).

Other than that (that is, if your intention was to take the 1st <li> element out of the <ul> element and remove its box-shadow CSS property) - your code is just fine.

Edit

Dude, what a mess.. :) Here is a JSFiddle I fixed up a bit. Below is the explanation.

There are several things going on in that JSFiddle that should be fixed before we get to the real problem.

You have errors in that fiddle - see console. The line: 

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

doesn't end with a semicolon, and is then interpreted as a function due to (..) on the next line (I think) - which (for me at least) results in an error in JS console. If semicolon is added - error is gone.

Additionally... There is a line:

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

which prints your undefined and is exactly what was discussed below and should be

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

which then prints the empty string.

Moreover, when printed, your pBoxShadowProperty variable contains boxShadow string. Which is, of course, not a valid CSS property I am familiar with. So this:

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

won't do a thing.

Now to the meat of the issue here...

eTabInd.children[iActiveNo-1].style

doesn't have 'box-shadow' property to begin with, because you haven't put it in style attribute of <li> element. It is put on the <li> element through the virtues of this CSS selectors sequence: #feature_tabs_indicators ul #ind_bt.

Now, since you wanted the style attribute - you won't get the computed style the above CSS selectors sequence applies. Thus - you won't be able to remove it.

What you could have done is create another class, that doesn't have a box-shadow property and replace your original c_ind with it.

Upvotes: 2

david
david

Reputation: 4278

it looks like you have not set value correctly as it should be like 

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

Dose that help or dose still return 0?

Upvotes: -1

Related Questions