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