jsÐÞ¸ÄcssÑùʽ±í½âÎö(ת)
abc.css
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="abc.css" />
<TITLE> New Document </TITLE>
<script>
window.onload=fnInit;
function fnInit(){
// ·ÃÎÊ styleSheet ÖеÄÒ»Ìõ¹æÔò, ½«Æä backgroundColor ¸ÄΪÀ¶É«¡£
var oStyleSheet=document.styleSheets[0];
var oRule=oStyleSheet.rules[0];
oRule.style.backgroundColor="#0000FF";
}
</script>
</HEAD>
<BODY>
<div class="class1">aaa</div>
</BODY>
</HTML>
(2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:399px;
height:195px;
z-index:1;
border:1px solid #000;
background-color:#CCCCCC;
}
-->
</style>
<script>
window.onload = function(){
alert(document.getElementById('apDiv1').currentStyle.width)
}
</script>
</HEAD>
<BODY>
<div id="apDiv1">aaa</div>
</BODY>
</HTML>
»¹¿ÉÒÔÓà document.styleSheets(i).href ¿ÉÒÔÖªµÀµ±Ç°Ò³ÃæÖÐÒýÓõÄÿ¸öcssµÄÎļþ£¡
Áí£ºCSSÊôÐÔÓëJavaScript±àÂë¶ÔÕÕ±í
£¨Ò»¶¨Òª×¢Ò⣬ Éϴα¾ÈË_ºÎÏòÑô£¬ÔÚʹÓÃjsÐÞ¸ÄcssµÄÖÐmargin-leftÊôÐÔʱ£¬×ܱ¨"left"䶨Ò壬ºóÀ´£¬ÕÒÁ˺öà×ÊÁÏ£¬²Å·¢ÏÖÔÚjsÖУ¬margin-leftµÄд·¨Îª:marginLeft£¬»ÐÈ»´óÎò£¬Ï£ÍûÓöµ½ÏàͬÎÊÌâµÄÅóÓÑ£¬½÷É÷¶Ô´ý¡££©
CSSÓëJS½ôÃÜÅäºÏ£¬ÎªÎÒÃǵÄÒ³ÃæÔöÌíÁ˺ܶà±ðÖµÄЧ¹û¡£ÎªÁ˴ﵽijÖÖÌØÊâµÄЧ¹ûÎÒÃÇÐèÒªÓÃJavascript¶¯Ì¬µÄÈ¥¸ü¸Äijһ¸ö±êÇ©µÄCSSÊôÐÔ¡£
±ÈÈ磺Êó±ê¾¹ýÒ»¸öͼƬʱÎÒÃÇÈÃͼƬ¼ÓÒ»¸ö±ß¿ò£¬´úÂë¿ÉÄÜÊÇÕâÑù£ºJavaScriptÖÐstyleºóÃæµÄÊôÐÔÓ¦¸ÃÊÇʲô£¿
<script type="text/javascript">
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {&
Ïà¹ØÎĵµ£º
<style type="text/css">
/*
´ÓÉÏÍùϽ¥±ä
*/
body
{
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#003C9F,endColorStr=white);
}
/*
´Ó×óÉÏÖÁÓÒϽ¥±ä
*/
body
{
background-color:skyblue;
FILTE ......
jsÒªÇó£ºÎªÊ¹ÏµÍ³ÄÜÔÚIEºÍFFÏÂÕý³£ÔËÐУ¬²»ÒªÊ¹ÓÃÔÉú̬µÄjavascript£¬½¨ÒéʹÓÃjsµÄ¿â£¨È磺jquery£©
²¢ÇÒÒªÇóÓÃjqueryÖУ¬»ñÈ¡¶ÔÏóµÄÊôÐÔʹÓÃ$obj.attr("attrName"),²»ÒªÊ¹ÓÃobj.attrName,·ÀÖ¹×Ô¶¨ÒåµÄÊôÐÔÔÚFFÖв»ÄÜÕý³£ÔËÐÐ
1¡¢ÎÊÌ⣺<span></span>ÔÚFFÏÂÔË ......
CSS HackËÙ¼Ç: *html , IE +html , IE _html , IE6 *+html , IE7 height/*\**/,IE8 ±ØÐë±£Ö¤HTML¶¥²¿ÓÐÈçÏÂÉùÃ÷:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ʾÀý height:100px;¡¾FF¡¿ ......
Ëæ×Å×îÐÂCSSµÄ²»¶ÏÍêÉÆ£¬Ô½À´Ô½¶àµÄÍøÕ¾²ÉÓÃDIV+CSS²¼¾Ö¡£¶øÔÀ´Ê¹ÓÃtableÌ×tableµÄÍøÒ³²¼¾ÖģʽҲÖð½¥Ó¦¸ÃÌÔÌÁË¡£ÓÉÓÚĿǰIE6²»ÄÜÖ§³ÖÓÐЩ±ê×¼µÄCSS£¬ÐèÒªÓÃ΢ÈíÌØÓеÄCSSÀ´ÐÞ¸´ÕâЩBUG.¶øÇÒÏÖÔÚËæ×Åä¯ÀÀÆ÷²ã³ö²»ÇҪÊÇÒ³ÃæÄܹ»ÊÊÓ¦¾¡Á¿¶àµÄä¯ÀÀÆ÷³ÉΪһ¸ö¿ÎÌâ¡£ µ«ÊÇËæ×ÅCSS±ê×¼µÄ½øÒ»²½ÍêÉÆ£¬ä¯ÀÀÆ÷½«×îÖÕ¶¼»á×ñÑÕ⸠......
Ñ¡ÔñÆ÷µÄ·Ö×é
Òâ˼¾ÍÊÇ˵¼¸¸öÑ¡ÔñÆ÷¿ÉÒÔͬʱʹÓÃÒ»¸öÉùÃ÷£¬µ«ÊÇÑ¡ÔñÆ÷Ö®¼ä¼Çסһ¶¨ÒªÓöººÅÀ´¸ô¿ª£¬ÕâÑùÎÒÃÇ»á½ÚÊ¡Á˺ܶà´úÂë
ÎÒÃǾٸöÀý×Ó°É£¡
h1,h2,h2,h3,h5,h6 {
color: red; background:blue;
}
ÕâÑùËùÓеÄh±êÌâ±êÇ©µÄ×ÖÌåÑÕÉ«ÊǺìÉ«£¬±³¾°ÊÇÀ¶É«£»Ó¦¸ÃÇå³þÁ˰ɣ¡
css¼Ì³ÐÐÔµÄÎÊÌâ
×ÓÔªËØ¼Ì³Ð¸¸ÔªËØµÄ ......