Question

我想动态地将更多的css类直接应用于内联样式标记，我尝试下面不能正常工作（在我的情况下我无法创建一个类）它适用于标签，但不适用于

    <script type='text/javascript'>
    function CommonClassCreateFunction()
    {
      var css_cls="{color: #900;margin-top:20px;}:hover {margin-top:0px;}";
      return css_cls;
    }
    </script>
    -----
    -----
    <script type='text/javascript'>
    var css_cls=CommonClassCreateFunction();
    $('#iiffrraammee').contents().find('#newtxtid').css(css_cls);
    </script>

-----
-----
<textarea class="expand close" id="newtxtid" name="ta" wrap="hard" spellcheck="false"></textarea>

Answer 1

CSS

.txtClass{ color: #900; margin-top:20px;}
.txtClass:hover{ margin-top:0px;}

JQuery的的

$('#iiffrraammee').contents().find('#newtxtid').addClass('txtClass');

演示：

http://jsfiddle.net/qx2QY/

Answer 2

jQuery允许您使用它的.css()函数更改css。您可以通过将css规则作为参数传递来执行此操作：

$('#iiffrraammee').contents().find('#newtxtid').newtxtid.css({
    'color': '#900',
    'margin-top': '20px',
});

$('#iiffrraammee').contents().find('#newtxtid:hover').newtxtid.css({
    'margin-top': '0px'
});

查看.css() function documentation.

Answer 3

你不能这样做，内联样式只支持属性，你要做的是在.css文件或标签之间定义类属性，并将这个类添加到DOM中。

例：

<强> CSS

   <style>
   .NewClass{ color: #900; margin-top:20px;
   }
   .NewClass:hover{ margin-top:0px;
   }
   </style>

<强> jQuery的：

$('#iiffrraammee').contents().find('#newtxtid').addClass('NewClass');

Answer 4

Javascript在html源代码中出现后立即运行。在您的示例中，javascript位于要修改的html上方，这会导致错误。

让所有HTML下载和显示未格式化然后应用CSS将导致浏览器呈现未格式化的html然后更改它。该网站对许多人来说都是破碎的，重新格式化将分散注意力并产生网站缓慢的感觉。这不是一个好的用户体验。

jquery基本上更改了标签内联属性。

：hover是一个伪选择器，用于样式表。使用javascript创建样式表并非不可能，但这是不切实际的...... How to write a:hover in inline CSS? ...但是为了用户的缘故，我不推荐这种做法。

注意：工作草案中考虑了内联伪选择器，http://www.w3.org/TR/2002/WD-css-style-attr-20020515但它们从未被采用，在现代浏览器中不起作用。

将许多类应用于内联样式html

4 个答案: