jquery:在运行时创建/读取.css样式

Question

我有一个使用jQuery +后期的应用程序，除了突出显示图像映射段之外，我还想根据图像映射的mouseover/mouseout事件动态高亮显示某些HTML元素。

除了一件事外，我知道如何完成所有这些工作(对于我想要突出显示的HTML元素，只需要适当地调用addClass和removeClass )。我想做以下任何一件事：

• 在运行时创建一个CSS样式，该样式反映后期的视觉设置(行/填充样式+不透明度)
• 将maphilight插件设置为反映我设置的CSS样式。

我更喜欢做后者，并在.css文件中对其进行配置，但目前我不知道如何处理。

有谁可以帮我？

编辑:我正在寻找一个答案，其中包括如何读取或写风格的jQuery工具插件，因为它没有太多的文档。

Answer 1

它可能只会更改标题样式表。这一技术在正确使用时是优越的。它永远不应该取代适当的班级分配。

var renderDropArea = function(renderMe) {
  var dropSheet = document.getElementById('dropAllowedDisplay');
  if (renderMe) {
    // IE 7 & 8
    if (dropSheet.styleSheet) {
      dropSheet.styleSheet.addRule('.dropAllowedHead','background-color:#72F193;');
      dropSheet.styleSheet.addRule('.dropAllowed','background-color:#72F193;');
    } else {
      document.getElementById('dropAllowedDisplay').innerHTML =
        ".dropAllowedHead { background-color:#72F193; } .dropAllowed { background-color:#72F193; }";
    }
  } else {
    // IE 7 & 8
    if (dropSheet.styleSheet) {
      if (dropSheet.styleSheet.rules.length) {
        dropSheet.styleSheet.removeRule(0);
        dropSheet.styleSheet.removeRule(0);
          }
    } else {
      document.getElementById('dropAllowedDisplay').innerHTML = '';
    }   
      }
}