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

我有一个我正在使用的应用程序 ，除了突出显示图像映射段外，我还希望根据图像映射的mouseover/mouseout事件动态突出显示某些HTML元素

除了一件事之外，我知道如何做所有的事情（只是为我想要突出显示的HTML元素适当地调用addClass和removeClass）。我想执行以下任一操作：

• 在运行时创建反映maphilight视觉设置的CSS样式（线条/填充样式+不透明度）
• 设置maphilight插件以镜像我设置的CSS样式

我更喜欢做后者，并在.css文件中配置它，但目前我也不知道如何做

有人能帮我吗

---

---

编辑：我正在寻找一个答案，其中包括如何从jQuery maphilight插件读取或写入样式，因为它没有太多文档。

它可能只更改标题样式表。正确使用时，这种技术是优越的。它永远不应该取代正确的类赋值

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 = '';
    }   
      }
}

---

这有助于我理解必须发生的底层CSS DOM操作，但我更感兴趣的是如何使用jQuery实现这一点，因为使用该库的理由应该是增加浏览器的独立性并使其更易于使用。我不相信有任何实现可以自动处理这一点。您可以随时将我的代码放入jQuery小部件中。这就是jQuery的真正威力。所有的“浏览器独立性”都源于社区的贡献。这里有一个这样的贡献