يمكن أن يدرك JS أن المستخدمين يغيرون النمط في الصفحة عن طريق تحديد الشروط في الصفحة. يمكن تعديل نمط الصفحة من خلال النمط أو من خلال CSS. دعنا نلقي نظرة على JS لتغيير أسلوب النمط. الرمز كما يلي:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> change.html </title> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"> <! type = "text/css" href = "./ Styles.css">-> <script language = "javaScript"> test 4 (event) {if (event.value == "Black") {// get div var div1 = document.getElementByid ('div1') ؛ div1.style.backgroundColor = "Black" ؛ } if (event.value == "red") {// get div1 var div1 = document.getElementById ('div1') ؛ div1.style.backgroundColor = "Red" ؛ }} </script> </head> <body> <div id = "div1"> div1 </viv> <input type = "button" value = "black" onClick = "test4 (this)"/> <input type = "button" value = "red" onClick = "test4 (this)"/> </body> </html>يمثل Test4 (هذا) التيار <الإدخال المكافئ لمعاملته ككائن.
دعنا نلقي نظرة على تغيير نمط CSS مرة أخرى ، الرمز هو كما يلي:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> change1.html </title> <tyta http-equiv = "content-type" content = "text/html ؛ href = "css/change.css"> <script language = "javaScript"> test4 (event) {// احصل على جميع محددات الفئة في ورقة الأنماط للحصول على var ocssroules = document.stylesheets [0] .rules ؛ // قم بإخراج الفئة var style1 = ocssrules [0] ؛ if (event.value == "Black") {//window.alert(style1.style.backgroundColor) ؛ style1.style.backgroundColor = "Black" ؛ } آخر if (event.value == "red") {style1.style.backgroundColor = "Red" ؛ }} </script> </head> <body> <div id = "div1"> div1 </viv> <input type = "button" value = "black" onClick = "test4 (this)"/> <input type = "button" value = "red" onClick = "test4 (this)"/> </body> </html>ما سبق هو المحتوى الكامل للأمثلة البسيطة لتغيير الأنماط وأنماط CSS التي جلبها لك المحرر. آمل أن يدعم الجميع wulin.com أكثر ~