jsÖÐÔõôдcss
ÔõÑùÔÚ javascript Öбàд css£¿ÄÚÁªÑùʽ£ºÔÚ html ÔªËØÖÐÖ±½ÓʹÓà style ÊôÐÔÖ¸¶¨ css Ñùʽ¡£ÔªËØÒªÁ죺ͨ¹ý htmlelement.style ¹¤¾ß»á¼ûºÍ¸ü¸ÄÔªËØÑùʽ¡£cssom£ºÊ¹Óà cssom ½Ó¿Ú½¨ÉèºÍ²Ù×÷Ñùʽ±íºÍÑùʽ¹æÔò¡£
ÔõÑùÔÚ JavaScript Öбàд CSS
ÔÚ JavaScript Öбàд CSS ÔÊÐíÄú¶¯Ì¬µØ¸ü¸ÄÍøÒ³µÄÑùʽ£¬´Ó¶øʵÏÖ½»»¥ÐÔ¸ü¸ßºÍ¸ü¾ßÏìÓ¦ÐÔµÄÓû§½çÃæ¡£
ÒªÁ죺
ÄÚÁªÑùʽ£ºÖ±½ÓÔÚ HTML ÔªËØÖÐʹÓà style ÊôÐÔ£¬²¢ÔÚÒýºÅÄÚ±àд CSS Ñùʽ¡£
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
<p style="color: red; font-size: 20px;">Hello World</p>
µÇ¼ºó¸´ÖÆ
ÔªËØÒªÁ죺ʹÓà HTMLElement.style ¹¤¾ß»á¼ûºÍÐÞ¸ÄÔªËصÄÑùʽ¡£
const p = document.querySelector('p'); p.style.color = 'blue'; p.style.fontSize = '24px';
µÇ¼ºó¸´ÖÆ
CSSOM£ºÊ¹Óà Document Object Model (DOM) µÄ CSSOM ½Ó¿ÚÀ´½¨ÉèºÍ²Ù×÷Ñùʽ±íºÍÑùʽ¹æÔò¡£
const styleSheet = document.styleSheets[0]; const newRule = styleSheet.cssRules[0].style; newRule.color = 'green';
µÇ¼ºó¸´ÖÆ
Óŵ㣺
¶¯Ì¬ÐÔºÍÎÞаÐÔ£ºÔÊÐíÄúƾ֤Óû§½»»¥»òÊÂÎñÀ´ÐÞ¸ÄÑùʽ£¬´Ó¶ø½¨Éè¸ü½»»¥µÄÓû§ÌåÑé¡£
Õë¶ÔÐÔ£ºÄú¿ÉÒÔÕë¶ÔÌض¨µÄ HTML ÔªËØ»ò×é¼þÓ¦ÓÃÑùʽ£¬Ìṩ¸ü¸ßµÄÑùʽ¿ØÖÆ¡£
ïÔÌÑùʽ±í´óС£º½« CSS ǶÈëµ½ JavaScript ÎļþÖпÉÒÔïÔ̶ÔÍⲿÑùʽ±íµÄÒÀÀµ£¬´Ó¶øËõСÎļþ¾Þϸ¡£
×¢ÖØÊÂÏ
ÑùʽÁýÕÖ£ºÓëÄÚÁªÑùʽÏà±È£¬CSSOM ÒªÁì¾ßÓÐÓÅÏȼ¶½Ï¸ßµÄÑùʽ£¬¿ÉÄÜÁýÕÖÆäËûÑùʽ¡£
¿Éά»¤ÐÔ£ºÔÚ´óÐÍÏîÄ¿ÖУ¬½« CSS ǶÈëµ½ JavaScript ÎļþÖлήµÍ¿Éά»¤ÐÔ£¬ÓÉÓÚÄúÐèÒªÔڶദÖÎÀíÑùʽÐÅÏ¢¡£
½»Ö¯ä¯ÀÀÆ÷¼æÈÝÐÔ£ºÄ³Ð© JavaScript-CSS ¼¼ÇÉ¿ÉÄÜÔÚËùÓÐä¯ÀÀÆ÷Öв»ÊÜÖ§³Ö£¬Òò´ËÔÚ°²ÅÅÇ°¾ÙÐвâÊÔºÜÊÇÖ÷Òª¡£
ÒÔÉϾÍÊÇjsÖÐÔõôдcssµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡