CSS และ JS ทำงานร่วมกันอย่างใกล้ชิดเพื่อเพิ่มเอฟเฟกต์พิเศษมากมายให้กับเพจของเรา เพื่อให้ได้เอฟเฟกต์พิเศษ เราจำเป็นต้องใช้ Javascript เพื่อเปลี่ยนคุณสมบัติ CSS ของแท็กบางแท็กแบบไดนามิก
ตัวอย่างเช่น: เมื่อเมาส์เลื่อนผ่านรูปภาพ เราจะเพิ่มเส้นขอบให้กับรูปภาพ โค้ดอาจเป็นดังนี้: คุณลักษณะหลังสไตล์ใน JavaScript ควรเป็นอย่างไร
<script type="text/javascript">
ฟังก์ชั่น imageOver (e) {
e.style.border="1px สีแดงทึบ";
-
ฟังก์ชั่น imageOut (e) {
e.style.borderWidth=0;
-
</สคริปต์>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript CSS Style การเปรียบเทียบแอตทริบิวต์ตาราง
ป้ายชื่อกล่องและการเปรียบเทียบแอตทริบิวต์
ไวยากรณ์ CSS (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ไวยากรณ์ JavaScript (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
ชายแดน
ขอบล่าง ขอบล่าง
เส้นขอบด้านล่างสี borderBottomColor
สไตล์เส้นขอบด้านล่าง borderBottomStyle
เส้นขอบความกว้างด้านล่างเส้นขอบBottomWidth
ขอบสี ขอบสี
ขอบซ้าย ขอบซ้าย
เส้นขอบสีซ้าย borderLeftColor
สไตล์เส้นขอบซ้าย borderLeftStyle
เส้นขอบกว้างซ้าย borderLeftWidth
เส้นขอบ-ขวา เส้นขอบขวา
เส้นขอบขวาสี borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
สไตล์เส้นขอบ borderStyle
ขอบบน ขอบบน
ขอบสีบนสุด borderTopColor
สไตล์เส้นขอบบนสุด borderTopStyle
เส้นขอบความกว้างบนสุด borderTopWidth
เส้นขอบกว้าง เส้นขอบกว้าง
ชัดเจน ชัดเจน
ลอย floatStyle
อัตรากำไรขั้นต้น
ขอบล่าง ขอบล่าง
ขอบซ้าย ขอบซ้าย
ขอบขวา ขอบขวา
ขอบบน ขอบด้านบน
ช่องว่างภายใน
ช่องว่างภายในด้านล่าง
ช่องว่างภายในด้านซ้าย
ช่องว่างภายใน-ด้านขวา
ช่องว่างภายในด้านบน
ป้ายกำกับสีและพื้นหลังและการเปรียบเทียบคุณลักษณะ
ไวยากรณ์ CSS (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ไวยากรณ์ JavaScript (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
พื้นหลัง
สิ่งที่แนบมากับพื้นหลัง
สีพื้นหลัง พื้นหลังสี
ภาพพื้นหลัง ภาพพื้นหลัง
ตำแหน่งพื้นหลัง ตำแหน่งพื้นหลัง
พื้นหลังซ้ำพื้นหลังซ้ำ
สีสี
แท็กสไตล์และการเปรียบเทียบแอตทริบิวต์
ไวยากรณ์ CSS (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ไวยากรณ์ JavaScript (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
จอแสดงผล
ประเภทรายการสไตล์ listStyleType
รายการสไตล์รูปภาพ listStyleImage
รายการสไตล์ตำแหน่ง listStylePosition
รายการสไตล์ listStyle
พื้นที่สีขาว whiteSpace
ป้ายกำกับลักษณะข้อความและการเปรียบเทียบคุณลักษณะ
ไวยากรณ์ CSS (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ไวยากรณ์ JavaScript (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
แบบอักษร
ตระกูลฟอนต์ ฟอนต์แฟมิลี่
ขนาดตัวอักษร FontSize
รูปแบบตัวอักษร FontStyle
แบบอักษรรูปแบบต่างๆ
น้ำหนักแบบอักษร FontWeight
การเปรียบเทียบป้ายกำกับข้อความและคุณลักษณะ
ไวยากรณ์ CSS (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ไวยากรณ์ JavaScript (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่)
การเว้นวรรคตัวอักษร
ตัวแบ่งบรรทัด lineBreak
ความสูงของเส้น ความสูงของเส้น
การจัดแนวข้อความ textAlign
ตกแต่งข้อความ textDecoration
เยื้องข้อความ textIndent
ปรับข้อความให้ชิดขอบ textJustify
การแปลงข้อความ textTransform
จัดแนวตั้ง จัดแนวตั้ง