jQueryʹÓÃÊÖ²áÖ®CSS²Ù×÷
Jquery¶ÔcssµÄ²Ù×÷Ï൱·½±ã£¬Äܷܺ½±ãÎÒÃÇȥͨ¹ýjsÐÞ¸Äcss¡£´«Í³javascript¶ÔcssµÄ²Ù×÷Ï൱·±Ëö£¬±ÈÈç
<div id="a" style="background:blue">css</div>
È¡ËüµÄbackgroundÓï·¨ÊÇ£º
document.getElementById("a").style.background
¶øjQuery¶Ôcss¸ü·½±ãµÄ²Ù×÷£º
$("#a").background();$("#a").background(“red”)
˵Ã÷ÈçÏÂ
$("#a")µÃµ½jQuery¶ÔÏó[ <div id="a" … /div> ]
$("#a").background()½«È¡³ö¸Ã¶ÔÏóµÄbackgroundÑùʽ¡£
$("#a").background(“red”)½«¸Ã¶ÔÏóµÄbackgroundÑùʽÉèΪredjQueryÌṩÁËÒÔÏ·½·¨£¬À´²Ù×÷css:
background ()
background (val)
color()
color(val)
css(name)
css(prop)
css(key, value)
float()
float(val)
height()
height(val)
width()
width(val)
left()
left(val)
overflow()
overflow(val)
position()
position(val)
top()
top(val)
ÕâÀïÐèÒª½²½âÒ»ÏÂcss(name);css(prop);css(key, value)£¬ÆäËûµÄ¿´Ãû×Ö¶¼ÖªµÀʲô×÷ÓÃÁË£¡
<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
css(name):»ñÈ¡ÑùʽÃûΪnameµÄÑùʽ
$("#a").css("color"):½«µÃµ½ÑùʽÖÐcolorÖµred£¬("#a").css("background ")½«µÃµ½blue
css(prop):propÊÇÒ»¸öhash¶ÔÏó£¬ÓÃÓÚÉèÖôóÁ¿µÄcssÑùʽ
$("#b").css({ color: "red", background: "blue" });
×îÖÕЧ¹ûÊÇ
<p id="b" style="background:blue; color:red">test</p>
{ color: "red", background: "blue" }£¬hash¶ÔÏó£¬colorΪkey£¬"red"Ϊvalue£¬
css(key, value) ÓÃÓÚÉèÖÃÒ»¸öµ¥¶ÀµÃcssÑùʽ
$("#b").css("color","red");
×îÖÕЧ¹ûÊÇ
<p id="b" style="color:red">test</p>
Ïà¹ØÎĵµ£º
1.Çø±ðIEºÍFirefox
.title {
background:blue; /*Firefox */
background:red \9; /*IE6¡¢IE7¡¢IE8*/
}
2.Çø±ðIE6¡¢IE7¡¢IE8¡¢Firefox
.title {
background:blue; /*Firefox */
background:red \9; /*IE6¡¢IE7¡¢IE8 */
*background:black; /*IE7 */
_background:orange; /*IE6 */
}
×¢Ò⣬ÎÞÂÛÔõÑù£¬¶¼ÊÇFireFox ......
ÔÚcssÎļþÀï¼ÓÈë
@IMPORT url("dijit/themes/soria/soria.css");
@IMPORT url("dojo/resources/dojo.css");
½«soria.cssÖеÄ.soriaÈ«²¿Ì滻Ϊbody,ͬʱÔÚhtmlÀï²»ÓÃÔÙ¼Óclass="soria"
ʹÓÃÆäËü·ç¸ñÊ±Ìæ»»Â·¾¶dijit/themes/soria/soria.css¼´¿É ......
CSS¶Ôä¯ÀÀÆ÷Æ÷µÄ¼æÈÝÐÔ¾ßÓкܸߵļÛÖµ£¬Í¨³£Çé¿öÏÂIEºÍFirefox´æÔںܴóµÄ½âÎö²îÒ죬ÕâÀï½éÉÜһϼæÈÝÒªµã¡£
³£¼û¼æÈÝÎÊÌ⣺
1¡¢DOCTYPE Ó°Ïì CSS ´¦Àí
2¡¢FF£ºdiv ÉèÖà margin-left£¬ margin-right Ϊ auto ʱÒѾ¾ÓÖУ¬IE ²»ÐÐ
3¡¢FF: body ÉèÖà text-align ʱ£¬ div ÐèÒªÉèÖà margin: auto(Ö÷ÒªÊÇ margin-left£¬margi ......
1.»ù±¾Óï·¨
¡¡¡¡
¡¡¡¡CSSµÄ¶¨ÒåÊÇÓÉÈý¸ö²¿·Ö¹¹³É£ºÑ¡Ôñ·û£¨selector£©£¬ÊôÐÔ£¨properties£©ºÍÊôÐÔµÄȡֵ£¨value£©¡£
¡¡¡¡»ù±¾¸ñʽÈçÏ£º
¡¡¡¡selector { property: value}
¡¡¡¡£¨Ñ¡Ôñ·û { ÊôÐÔ£ºÖµ}£©
¡¡¡¡Ñ¡Ôñ·ûÊÇ¿ÉÒÔÊǶàÖÖÐÎʽ£¬Ò»°ãÊÇÄãÒª¶¨ÒåÑùʽµÄHTML±ê¼Ç£¬ÀýÈçBODY¡¢P¡¢TABLE……£¬Äã¿ÉÒÔÍ ......
ÔÚ˵µ½Õâ¸öÎÊÌâµÄʱºò£¬Ò²ÐíÓÐÈË»áÎÊCSSÖв»ÊÇÓÐvertical-alignÊôÐÔÀ´ÉèÖô¹Ö±¾ÓÖеÄÂ𣿼´Ê¹ÊÇijЩä¯ÀÀÆ÷²»Ö§³ÖÎÒÖ»Ðè×öÉÙÐíµÄCSS Hack¼¼Êõ¾Í¿ÉÒÔ°¡£¡ËùÒÔÔÚÕâÀïÎÒ»¹Òª啰àÂÁ½¾ä£¬CSSÖеÄÈ·ÊÇÓÐvertical-alignÊôÐÔ£¬µ«ÊÇËüÖ»¶Ô(X)HTMLÔªËØÖÐÓµÓÐvalignÌØÐÔµÄÔªËØ²ÅÉúЧ£¬ÀýÈç±í¸ñÔªËØÖеģ¼td£¾¡¢£¼th£¾¡¢£¼caption£¾ ......