CSSをJavaScriptに追加する

Question

F.Iのような一連のCSSルールを追加するにはどうすればよいですか？ 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はツールチップを表示しますが、イメージマップ上で使用できるように、ツールチップをより魅力的にする必要があります。

<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

あなたは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); 
} 

それとも、あなたは要素のstyle属性にスタイルを適用するためにjQueryのAPIを使用することができます。おそらく、あなたはjQueryの正規化の利益のためにしたい場合は、オブジェクトにスタイルを変換する必要があります。

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

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

Answer 2

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のクエリをキャッシュしてください。