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

Question

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

除了一件事，我知道如何完成所有这些(只是对我想突出显示的 HTML 元素适当调用 addClass 和 removeClass)。我想执行以下任一操作:

• 在运行时创建反射(reflect) maphilight 视觉设置的 CSS 样式(线条/填充样式 + 不透明度)
• 设置 maphilight 插件以反射(reflect)我设置的 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 = '';
    }   
      }
}