Dynamically change css style by class name

Question

<p class="typeA build1"> Build 1 <div class="b">Complete</div></p>
<p class="typeA build2"> Build 2 <div class="b">Incomplete</div></p>
//about 6 or 7 more builds...

I need to access the style of build# to change the display...all are originally hidden but I hava java code that creates a string/s (ex. "build2" and "build3"). I have that string saved as "tempKey" in my JAVA code.

Then in a javascript script:

var tempKey = "<%=tempKey%>";
document.getElementsByClassName(tempKey).style.display = "block !important";

I have also tried adding a class "active" and had that class have the same style (block !important), plus a number of different ways to solve this. It seems I just can't access the element right using the java string in a javascript function.

EDIT:

I am accessing the right element, but it won't let me overwrite the display style from none to block. For some reason !important is not working...

Have you looked at your resulting HTML DOM in the browser and checked if the style is applied? We would know if it is a CSS problem or a JS-Problem. — D.R.
– D.R., Commented Jul 7, 2015 at 21:29
Ok. So in my code, say in the example above the class typeA has a style display of "none". I am trying to set "build2"'s style display to "block" to overwrite it. — kb_
– kb_, Commented Jul 7, 2015 at 21:40

wolfhammer · Accepted Answer · 2015-07-07 22:40:09Z

3

Remember that the selector returns an array so you need to supply the index [0].

var i = 3;
var tempKey = "build" + i;
var el = document.getElementsByClassName(tempKey)[0];
el.style.backgroundColor = "#FFCC00";

ul.type-list {
  list-style-type:none;
  padding:0;
}

ul.type-list li.typeA {
  border-bottom: 2px solid #99AACC;
}
ul.type-list li span.b {
  display:inline-block;
  width: 100px;
  float:right;
}

<ul class='type-list'>
  <li class="typeA build1">Build 1
    <span class="b">Complete</span>
  </li>
  <li class="typeA build2">Build 2
    <span class="b">Incomplete</span>
  </li>
  <li class="typeA build3">Build 3
    <span class="b">build3</span>
  </li>
  <li class="typeA build4">Build 4
    <span class="b">build4</span>
  </li>
</ul>

answered Jul 7, 2015 at 22:40

wolfhammer

2,6611 gold badge15 silver badges12 bronze badges

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

Comments

StriplingWarrior · Accepted Answer · 2015-07-08 16:51:38Z

2

getElementsByClassName() produces an array of items. You need to index into it:

var element = document.getElementsByClassName('build1')[0];
console.log(element.style);
element.style.display = "block";
console.log(element.style);

.typeA {display:none;}

<p class="typeA build1"> Build 1 <div class="b">Complete</div></p>
<p class="typeA build2"> Build 2 <div class="b">Incomplete</div></p>

And there's no need for !important because an individual element's style supercedes all the other styles that it would have inherited.

Update

The real problem here is that HTML rules don't allow <p> elements to contain <div> elements, so the browser is automatically closing the <p> tags for you, producing this DOM:

<p class="typeA build1"> Build 1 </p>
<div class="b">Complete</div>
<p></p>
<p class="typeA build2"> Build 2 </p>
<div class="b">Incomplete</div>
<p></p>

This makes it so that your inner divs aren't actually children of your p tags. Try using another element, like divs, for your outer containers.

var element = document.getElementsByClassName('build1')[0];
console.log(element.style);
element.style.display = "block";
console.log(element.style);

.typeA {display:none;}

<div class="typeA build1"> Build 1 <div class="b">Complete</div></div>
<div class="typeA build2"> Build 2 <div class="b">Incomplete</div></div>

edited Jul 8, 2015 at 16:51

answered Jul 7, 2015 at 22:34

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

6 Comments

kb_ Over a year ago

This still isn't working. Looking at the resulting HTML DOM in the browser, it picks up that I tried to change the display but is crossed out/inactive and shows that typeA wants "none".

kb_ Over a year ago

To convert a java string to a javascript variable is this correct? var tempKey = "<%=tempKey%>"

StriplingWarrior Over a year ago

@kb_: See my update. And no, the code that you just posted to convert a java string to a javascript variable would break if your string happens to have a double-quote character (") in it. I'd suggest you use a JSON converter library of some kind. var tempKey = <%=JsonWriter.objectToJson(tempKey)%>;

kb_ Over a year ago

I will try changing the <p>. For your other suggestion: my original tempKey is a value that I pulled from an external JSON.. why would I convert it back to a JSON?

StriplingWarrior Over a year ago

@kb_: Presumably tempKey is a Java String right? The correct JSON representation of "say "hello"" when JSON-serialized is "say \"hello\"", which is exactly what you want to have show up in your rendered output.

|

Collectives™ on Stack Overflow

Dynamically change css style by class name

2 Answers 2

Comments

Update

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related