Question

我有网站，为了响应用户交互，使用jquery动态创建div。 div将包含一个包含时间戳的span，以显示其创建时间，用户可以单击按钮来显示或隐藏时间戳范围。

我遇到的问题是，当用户选择隐藏时间戳时，如何防止未来动态添加的跨度显示？在参考这个问题Create a CSS rule / class with jQuery at runtime时，我动态地在头部添加了样式标记。但是，我还打算允许用户从下拉列表中选择字体并更改div内文本的字体样式。现在看来这种方法似乎会产生很多开销。

这两个问题都围绕着同一个问题：改变现有元素以及任何未来动态创建的匹配元素的css样式，但我不确定上面提到的方法是否真的是最佳解决方案？

编辑：SNIPPET

＆＃13;

$(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";
      }
    });
  });
});

＆＃13;

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

＆＃13;

Answer 1

您没有提供调试代码，但您可以这样做的方法是在容器元素上为整个事物切换notimestamps等类。< / p>

然后在您的主要CSS代码中，您可以简单地执行以下操作：

.container.notimestamps span {
    display:none;
}

如果您要更改字体样式，则可以执行非常类似的操作。

示例：

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

使用您最近添加的示例，您可以将其更改为：

＆＃13;

$(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());
  });
});

＆＃13;

#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";  
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用普通的javascript实现它

这是一个例子。您可以动态添加任何类似的样式

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

动态更改css属性的正确方法是什么？

2 个答案: