Question

我遇到了一些css + javascript的问题。你看，我正在尝试制作一种所见即所得的网页样式编辑器，其中有一个iframe加载一个包含类似代码的网页。

<head>
<style id=mystyle>
  /* something is here */
</style>
</head>
<body>
  <h1>Other, quite a lot autogenerated stuff along with javascript that add some interactivity.</h1>
</body>

现在，我需要修改#mystyle的内容，以便它实时反映到页面。使用jquery，我尝试使用几种技术，例如：

$(#mystyle).html(newcss);
$(#mystyle).replaceWith("<style id='mystyle'>"+newcss+"</style>")
$(#mystyle).after("the newcss along with style tag")，然后删除旧的。
$(#mystyle).delete() //只是为了看看会发生什么。

以上所有都无法改变网页的外观。事实上，删除标签（4.），并没有使页面变得丑陋，我确实使用“Inspect Element”检查，html确实改变但外观没有。那么......我做错了什么？

Answer 1

使用html似乎工作正常。见：

http://jsfiddle.net/tGSkS/

Answer 2

如果您要在页面加载时设置特定元素，则可以执行以下操作

$(function(){

  $('element-selector').css({
     style1:'value',
     style2:'value',
     style2:'value',
   });  

});

或在服务器上，有条件地渲染或动态构建样式表。

jQuery，编辑内联样式标记

2 个答案: