Proper way to dynamically change css properties?

Question

I have site that, in response to user interaction, dynamically creates divs using jquery. The div will have a span inside containing a timestamp to show its creation time, and the user can click a button to show or hide the timestamp span.

I ran into the issue of, when the user selects to hide timestamps, how do you prevent future dynamically added spans from showing? In reference to this question Create a CSS rule / class with jQuery at runtime, I added a style tag in the head dynamically. However, I also intended to allow the user to be able to choose a font from a drop down list and change the font style of the text inside the divs. Following this method now seems like it would create a lot of overhead.

Both issues revolve around the same issue: change already existing element and any future dynamically created matching element's css style, but I'm not sure the method mentioned above is really the best solution?

EDIT: SNIPPET

$(function() {
  $('#add').click(function() {
    $('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
  });

  $('#hidetime').click(function() {
    $(this).text(function(i, text) {
      if (text === "Hide Time") {
        $("<style>").prop("type", "text/css")
          .html(".time {display: none}").appendTo("head");
        return "Show Time";
      } else {
        $('style').remove();
        return "Hide Time";
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<div id='display'>

</div>

Jamie Barker · Accepted Answer · 2015-08-05T15:23:24.807

You've provided no code to debug, but the way you can do this is to toggle a class such as notimestamps on the container element for the whole thing.

Then in your main CSS code you can simply do something along the lines of:

.container.notimestamps span {
    display:none;
}

If you're changing font styles, you can do something very similar.

Example:

.container.font-arial {
   font-family: arial, sans-serif;
}
.container.font-tahoma {
   font-family: tahoma, sans-serif;
}

Using your recently added example you would change it to:

$(function() {
  $('#add').click(function() {
    $('#display').append("<div><span class='time'> ex. Timestamp</span> Div text contents...</div>");
  });

  $('#hidetime').click(function() {
    $('#display').toggleClass('notimestamp');
  });
  $('#font').change(function() {
    $('#display').attr('data-font', $(this).val());
  });
});

#display.notimestamp span {
  display:none;  
}
#display {
  font-family:sans-serif;  
}
#display[data-font="arial"] {
  font-family:Arial;  
}
#display[data-font="georgia"] {
  font-family:Georgia;  
}
#display[data-font="tahoma"] {
  font-family:Tahoma;  
}
#display[data-font="tnr"] {
  font-family:"Times New Roman";  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='add'>Add</button>
<button id='hidetime'>Hide Time</button>
<select id="font">
  <option value="arial">Arial</option>
  <option value="georgia">Georgia</option>
  <option value="tahoma">Tahoma</option>
  <option value="tnr">Times New Roman</option>
</select>
<div id='display'>

</div>

This works. On click of button, I now use $('.container').addClass('hidestamp'). That way the container now has the style and all future div spans will be hidden. Thank you — wizloc, Aug 05 '15 at 15:28
Is there a reason to apply a css class for the font rather than just $('#font').change(function() { $('#display').css('font-family', $(this).val()); }); — wizloc, Aug 05 '15 at 15:59
That would work too, however you would just need to make sure the font name is in the option value implicitly. I would check Times New Roman works because it might not due to more than one word and it needing to be in string format. — Jamie Barker, Aug 05 '15 at 16:36

score 0 · Answer 2 · answered Aug 05 '15 at 14:55

You can achieve it using plain javascript

Here is an example. You can add any similar styles dynamically

HTML

<div id="myDiv" style="margin: 50px 50px 50px 50px">This is a div.</div>
    <br />
<button type="button" onclick="removemargin()">remove margin</button>
<button type="button" onclick="removeLeftMargin()">remove leftmargin</button>
<button type="button" onclick="removeTopMargin()">remove topmargin</button>
<button type="button" onclick="addCssMargin()">add margin by adding class (dominant here)</button>

CSS

#myDiv {
    background: #EEE;
}

.myclass{
     margin : 100px 10px 15px 50px !important;
     background:red !important;
}

JAVASCRIPT

function removemargin() {
    document.getElementById("myDiv").style.margin = "0";
}

function removeLeftMargin() {
    document.getElementById("myDiv").style.marginLeft = "0";
}

function removeTopMargin() {
    document.getElementById("myDiv").style.marginTop = "0";
}

function addCssMargin() {
   var d = document.getElementById("myDiv");
   d.className = d.className + " myclass";
}

JsFiddle

I'm afraid this doesn't account for the issue of applying similar style to any subsequently added div's after clicking the button — wizloc, Aug 05 '15 at 15:02
if you click "add margin by adding class (dominant here)" button, it will add the class "myClass" which has rules set as important. so it will dominate other rules. — GaurabDahal, Aug 05 '15 at 15:08

Proper way to dynamically change css properties?

2 Answers2