Js - Append a value to element CSS

Question

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.

Have just pasted the jsfiddle code @ZenMaster To clarify, the box shadow property is not being dynamically set. I have set box shadow with CSS. When the user presses the green button, the box shadow should be removed. — Kayote
– Kayote, Commented Oct 14, 2011 at 6:36
What is supposed to happen? In any case - 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). If semicolon is added - everything seems to be working. — ZenMaster
– ZenMaster, Commented Oct 14, 2011 at 7:55
Excellent find. Thank you +ZenMaster. The semi-colon was the problem all along... I accidently placed it at the end of comment instead of before... — Kayote
– Kayote, Commented Oct 14, 2011 at 8:11

ZenMaster · Accepted Answer · 2011-10-14 08:27:52Z

2

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.

edited Oct 14, 2011 at 8:27

answered Oct 14, 2011 at 4:44

ZenMaster

12.8k5 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kayote Over a year ago

thanks @ZenMaster. That was a typo, it is correctly defined in the code. I'll upload it to jsfiddle & post the code.

Kayote Over a year ago

Correct answer is in the mini-comment to the question by ZenMaster.

ZenMaster Over a year ago

@SalmanKhan I am afraid it's not all, my friend. See update above.

Kayote Over a year ago

Dude, you rock! A million & one thanks for the clarification O' master of Zen. However, I think you have a few things wrong in the above. boxShadow is the js version of Box-shadow property & it does work. Yes, it doesn't work, for reason unknown to me as yet, when you insert value = "", replacing the "" with "0 0 0 transparent" does work. I'm not sure I follow the explanation in the third para from the bottom but here is what is going on in my code. The list item CSS is in external file which gets superseeded by the inline CSS written by Js (in this case boxShadow).

Kayote Over a year ago

The function getSupportedCSSproperty gets which syntax is relevant to the user's browser.The resultant is assigned to variable pBoxShadowProperty, which itself is linked to style attribute of the element. One mistake that I just caught was the syntax for boxShadow. I extract the backgroundColor property & assign it to pBackgroundColorProperty, which would be in the format 'rgb()', however, as the boxShadow property requires 'x x x rgb()', I need to insert the Xs which I hadn't done. Now that I have, its working beautifully with a huge thanks to you. Cheers again for the awesome help!

|

david · Accepted Answer · 2011-10-14 04:22:52Z

-1

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?

answered Oct 14, 2011 at 4:22

david

4,3383 gold badges26 silver badges26 bronze badges

5 Comments

ZenMaster Over a year ago

pBoxShadowProperty is a variable and as such should be accessed through [] - just as the OP has done. Your way won't work.

david Over a year ago

@ZenMaster true it will just return the css property

Kayote Over a year ago

ZenMaster is right, it wont because style is not an object whose property (pBoxShadowProperty) is being set.

ZenMaster Over a year ago

@david Nope. What would happen is you adding a new, totally CSS unrelated property pBoxShadowProperty to eTabInd.children[iActiveNo - 1].style object and assigning a string (that just happens to contain some CSS values) to it.

david Over a year ago

right i see thanks for the update guys, i shouldnt of tryed to answer the question without exactly knowing what was not working

Collectives™ on Stack Overflow

Js - Append a value to element CSS

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related