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-05 15:23:24Z

1

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>

edited Aug 5, 2015 at 15:23

answered Aug 5, 2015 at 15:02

Jamie Barker

8,2663 gold badges31 silver badges64 bronze badges

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

3 Comments

quirky purple Over a year ago

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

quirky purple Over a year ago

Is there a reason to apply a css class for the font rather than just $('#font').change(function() { $('#display').css('font-family', $(this).val()); });

Jamie Barker Over a year ago

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.

GaurabDahal · Accepted Answer · 2015-08-05 14:55:54Z

0

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

answered Aug 5, 2015 at 14:55

GaurabDahal

8766 silver badges16 bronze badges

2 Comments

quirky purple Over a year ago

I'm afraid this doesn't account for the issue of applying similar style to any subsequently added div's after clicking the button

GaurabDahal Over a year ago

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.

Collectives™ on Stack Overflow

Proper way to dynamically change css properties?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related