將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

回答

相關問題