Question

我想在加载页面后创建一个样式元素（比如加载页面后大约2-3秒）

HTML

<html>
<body>
   <div id="div1" >
      <div id= "div2" > some text goes here </div>
   </div>
</body>
</html>

的javascript

$(function () {

    var style = $('<style type="text/css" />').appendTo('head');
    style.html('body{ background:#000; }
                             \n
                            \#div1{ background:#0099f9; }'
    //I'm having some more elements which I need to alter their style attr's
    );

    var attr = style.html;

    style.html(attr + '\n\#div2{ background:#f0f; }');
});

我还有一堆html元素（除了提到的更多元素），我需要在页面加载后更改它们的样式

当我尝试阅读我的代码时，我感到很困难，因为它是硬编码的，

当我需要在上面的样式标记

中添加一些元素时，我也遇到了这个问题

这是他们简单的方法吗？使可读性

变得简单

感谢您的帮助!!

祝你有个美好的一天

Answer 1

我不知道这是否可以帮助你，而是动态尝试编写CSS，你不能创建不同的样式，并在渲染时为你的元素提供正确的CSS类吗？

像这样：

div.even
{
  background-color:#f00;
}

div.odd
{
  background-color:#ff0;
}

然后，您可以在呈现页面时确定正确的CSS类服务器端（使用PHP，ASP.Net，...）。

Answer 2

我建议查看客户端模板系统，如此处讨论的机制：http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

这种方法可以让你将CSS片段与代码分开，这将更加清晰。您将CSS放入<script>块中，这些块会故意制作“类型”，以便浏览器不会尝试执行它们。

jQuery在飞行中创建一个样式元素

2 个答案: