jsÔõôµ¼Èëcss
ÔÚ javascript Öе¼Èë css ÓÐÁ½ÖÖÖ÷Òª·½·¨£ºÊ¹Óà ±êÇ©£¬ÔÚ html ÎĵµµÄ ²¿·ÖÒýÓà css Îļþ¡£Ê¹Óà document.createelement(‘style’)£¬¶¯Ì¬½¨Éè ÔªËز¢½«ÆäÌí¼Óµ½ÎĵµµÄ ²¿·Ö¡£
ÔõÑùÔÚ JavaScript Öе¼Èë CSS
ÔÚ JavaScript Öе¼Èë CSS ÓÐÁ½ÖÖÖ÷ÒªÒªÁ죺
1. ʹÓà ±êÇ©
ÕâÖÖÒªÁìÉ漰ʹÓà ±êÇ©ÔÚ HTML ÎĵµµÄ
²¿·ÖÖÐÒýÓà CSS Îļþ£º
Á¬Ã¦Ñ§Ï°¡°Ç°¶ËÃâ·ÑѧϰÌõ¼Ç£¨ÉîÈ룩¡±£»
<link rel="stylesheet" href="styles.css">
µÇ¼ºó¸´ÖÆ
2. ʹÓà document.createElement(‘style’)
ÕâÖÖÒªÁìÉæ¼°ÔÚ JavaScript Öж¯Ì¬µØ½¨Éè
// ½¨Éè `<style>` ÔªËØ const styleElement = document.createElement('style'); // ÉèÖà CSS ¹æÔò styleElement.innerHTML = ` body { color: red; } `; // ½« `<style>` ÔªËØÌí¼Óµ½ÎĵµµÄ `<head>` ²¿·Ö document.head.appendChild(styleElement);</style>
µÇ¼ºó¸´ÖÆ
×¢ÖØ£º
ʹÓà ±êÇ©µÄÒªÁì¸ü¼òÆÓ£¬µ«¶Ô¶¯Ì¬¸ü¸ÄÑùʽ»òʹÓà JavaScript Ìõ¼þ¼ÓÔØ CSS Îļþ²»Ì«ÎÞа¡£
ʹÓà document.createElement(‘style’) µÄÒªÁì¸üÎÞа£¬µ«ÐèÒª¸ü¶à´úÂë¡£
ÒÔÉϾÍÊÇjsÔõôµ¼ÈëcssµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡
ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£