将CSS添加到JavaScript

如何添加一组CSS规则，如F.I. 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？ JavaScript显示工具提示，但我需要让它们更加花哨，以便我可以在图像映射上使用它们。将CSS添加到JavaScript

<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>

来源

2012-01-23 Bart Bus

您可以使用JavaScript创建一个样式表，并将其插入到这样的DOM：

var styles = '#elem { opacity:0.94; outline:none; content:""; }' // etc 
var style = document.createElement('style'); 

document.getElementsByTagName('head')[0].appendChild(style); 

if (style.styleSheet) { // IE 
    style.styleSheet.cssText = styles; 
} else { 
    var cssText = document.createTextNode(styles); 
    style.appendChild(cssText); 
}

或者，你可以使用jQuery的API的样式应用到元素的样式属性。你可能需要的样式转换为对象，如果你想受益jQuery的归一化：（“富”）

$('#elem').css({ 
    opacity: 0.94, 
    outline: 'none', 
    content:'' // etc 
});

http://api.jquery.com/css/

来源

2012-01-23 11:26:56 David

应该避免使用静态添加样式到样式表中。 '＃elem'也不好。 – Raynos

同意，但我解释了这个问题，好像OP想要使用JavaScript来应用样式。 “＃elem''有什么不好？这仅仅是一个例子...... – David

[ids are evil]（http://oli.jp/2011/ids/）在执行命中和通常将癌症引入您的代码方面的表现更糟糕。 – Raynos

将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的查询。

来源

2012-01-23 11:21:18 Raynos

的OP使用jQuery的，所以你可以做'$ CSS。（{// Rules}）;'，OP_did_请求纯JS。 – Bojangles

@JamWaffles：不，他只是问如何达到他想要的，在这种情况下，让我看看他是如何正确地做到这一点似乎是非常合适的。 –

注意在样式表中使用f.ex不透明时与在其''.css（）''api中使用jQuery规范化属性时得到的浏览器不一致。 – David

将CSS添加到JavaScript

回答

相关问题