动态更改CSS属性的正确方法？

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> 

Answer 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> 

Answer 2

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