javascript - 将 CSS 添加到 JavaScript

Question

如何添加一组 CSS 规则，如 F.I. 不透明度:0.94；大纲:无；内容:””;显示: block ；position:absolute；顶部:20px；左:50%；边距:0 0 0 -5px；宽度:0；高度:0；行高:0px； font-size:0px; 到下面的 JavaScript？ JavaScript 显示了工具提示，但我需要使它们更花哨，以便我可以在图像 map 上使用它们。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>  
<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function () {
    $('.1,.2,.3').css({
        position: 'absolute'
    }).hide()
    $('area').each(function (i) {
        $('area').eq(i).bind('mouseover mousemove', function (e) {
            $('.1,.2,.3').eq(i).css({
                top: e.pageY + 10,
                left: e.pageX + 10
            }).show()
        })
        $('area').eq(i).bind('mouseout', function () {
            $('.1,.2,.3').hide()
        })
    })
});//]]>  
</script>

Answer 1

将 CSS、JS 或 HTML 混合在一起是一种常见的反模式。 CSS 放在样式表中。

// in stylesheet .css
.new-class {
  opacity:0.94; 
  outline:none; 
  content:""; 
  display:block; 
  position:absolute; 
  top:20px; 
  left:50%; 
  margin:0 0 0 -5px; 
  width:0; 
  height:0; 
  line-height:0px; 
  font-size:0px;
}

JavaScript 在元素上操作类。

// in javascript 
elem.classList.add("new-class");

顺便说一句，你的剧本太疯狂了

// get each area
$('area').each(function (i) {
    // get them all again
    $('area').eq(i).bind('mouseover mousemove', function (e) {
        $('.1,.2,.3').eq(i).css({
            top: e.pageY + 10,
            left: e.pageX + 10
        }).show()
    })
    // and again. 
    $('area').eq(i).bind('mouseout', function () {
        $('.1,.2,.3').hide()
    })
})

请缓存您的 jQuery 查询。