انسخ رمز الكود كما يلي:
<html xmlns="http://www.w3.org/1999/xhtml">
<رئيس التشغيل = "الخادم">
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
.يوم
{
لون الخلفية: أبيض؛
}
.ليلة
{
لون الخلفية: أسود
}
</نمط>
<script language="javascript" type="text/javascript">
وظيفة أوبر ستايل () {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
إذا (divObj.className == "اليوم") {
divObj.className = "ليلة";
btnObj.value = "قم بتشغيل الضوء";
} آخر {
divObj.className = "day";
btnObj.value = "أطفئ الأضواء";
}
}
// قم بتعديل سمات نمط div دفعة واحدة، والتي تتكون من أنماط متعددة
// الطريقة الأولى:
طريقة الوظيفة () {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "blue";
divObj.style.border = "1 بكسل أحمر خالص";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "center";
}
// الطريقة الثانية:
طريقة الوظيفة اثنان () {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "لون الخلفية: أزرق؛ الحدود: 1 بكسل صلب أحمر؛ العرض: 300 بكسل؛ الارتفاع: 200 بكسل؛ موضع الخلفية: المركز";
}
</script>
</الرأس>
<الجسم>
<معرف النموذج = "form1" runat = "الخادم">
<div معرف = "divContent">
<font color="red">أنا شعبة، باه باه! </font>
</div>
<input type = "button" value = "أطفئ الأضواء" id = "btnCommit" onclick = "operStyle ()؛ />".
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<ساعة />
<h1>تعديل نمط divTest وتشغيل سمات متعددة</h1>
<div معرف = "divTest" >
<font color="red">تعديل نمط divTest</font>
</div>
<input type="button" value="تعديل نمط divTest" onclick="methodTwo()" />
</النموذج>
</الجسم>
</html>
عندما نستخدم js لكتابة أنماط CSS، فإننا عادة نستخدم الطريقتين التاليتين:
بشكل عام، عندما نستخدم js لتعيين نمط كائنات العناصر، سنستخدم هذا النموذج:
انسخ رمز الكود كما يلي:
var element= document.getElementById("id");
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;
ومع ذلك، فإن الطريقة المذكورة أعلاه لها عيب. إذا كان هناك المزيد من الأنماط، فسيكون هناك الكثير من التعليمات البرمجية؛ وتجاوز نمط الكائن من خلال JS هو عملية نموذجية لتدمير النمط الأصلي وإعادة بنائه زيادة الحمل على المتصفح.
توجد طريقة cssText في js:
بناء الجملة هو: obj.style.cssText("style");
يمكننا تعديل الكود أعلاه إلى:
انسخ رمز الكود كما يلي:
element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
يمكن أن تحاول طريقة الكتابة هذه تجنب عمليات إعادة التدفق المتعددة للصفحة وتحسين أداء الصفحة.