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

Question

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

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

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

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

谁能帮帮我？

---

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

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