Jump to content

setAttribute () to change an element style not working...


swirlingDervish
 Share

Recommended Posts

Hi, all, Swirling Dervish noobie here, and I can't seem to get one page element to "inherit" the height value of another:

 

 

js:

 

/* quotepick is the holder for the chosen display quote from the defText array;

i is the index of the quote from the definition (defText) array;

the goal is to get the div#jsGall2 (a backsplash to text) to inherit div#bennies' (text against the

backsplash) height value. */

 

var quotePick = defText;
if ((typeof quotePick) != 'undefined') {
var dSize = document.getElementById("bennies");
var eSize = document.getElementById("jsGall2");
var b = dSize.innerHTML=quotePick;
var f = eSize.setAttribute ("style", eval(dSize.style.height)); /* one version */
} else {
document.getElementById("bennies").innerHTML='';
}
I'VE ALSO TRIED:
var quotePick = defText;
if ((typeof quotePick) != 'undefined') {
var dSize = document.getElementById("bennies");
var eSize = document.getElementById("jsGall2");
var b = dSize.innerHTML=quotePick;
var f = eSize.style.height = dSize.style.height; /* another version */
} else {
document.getElementById("bennies").innerHTML='';
}
I know I've gotta be mucking up royally in syntax, right? Help....
-Swirling...headache... :umnik2:
Link to comment
Share on other sites

Hi, dsonesuk, I see what you mean about the inline style. It's almost like you have to create a new "instance" of bennies to get the present attributes of the element. Anyways, while var f now shows a height value, the value is still not passed to jsGall2's height attrib so the div's height will change. Not sure how else to pass the value...

Link to comment
Share on other sites

You are targeting the wrong element, you should be targeting #jsGall2:before which has the splash, OR remove :before and it should work. May need to add padding at bottom, but you can do this without javascript.

 

remove styling for #jsGall2:before and use

#bennies center:before {    background-color: #6495ED;    border-radius: 35px;    bottom: 0;    content: " ";    left: 0;    opacity: 0.3;    position: absolute;    right: 0;    top: 0;}#bennies center {    padding: 20px;}
Edited by dsonesuk
Link to comment
Share on other sites

Hi, dsonesuk, been a couple of hectic days....thanks for your response.

 

I had to do a quick review of pseudo elements again to be sure of where to target and when to reference. Tried your bennies code, which works almost perfectly, except that now the div#bennies text is taking the faded settings of the backsplash (which I wanted to avoid).

 

Instead, I took your first suggestion of removing the :before off the separate backsplash element div#jsGall2 and it finally worked. I'll just do a llittle padding tweaking as you suggested and that should clean it up the bottom overrun. Thanks for your help.

Link to comment
Share on other sites

#bennies * {position:relative; z-index:10;}#bennies:after {    background-color: #6495ED;    border-radius: 35px;    bottom: 0;    content: " ";    left: 0;    opacity: 0.3;filter:alpha(opacity=30); /* For IE8 and earlier */    position: absolute;    right: 0;    top: 0;z-index:0}#bennies >* {    padding: 20px;}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...