คุณคิดว่านี่เป็นคำถามง่าย ๆ ที่จะตอบทุกสิ่งที่ jQuery สามารถทำได้ น่าเสียดายที่ปัญหาเกิดขึ้นจากปัญหาทางเทคนิค: css: after และ: ก่อนกฎไม่ได้เป็นส่วนหนึ่งของ DOMดังนั้นจึงไม่สามารถแก้ไขได้โดยใช้วิธี DOM ของ jQuery
มีมีวิธีการที่จะจัดการกับองค์ประกอบเหล่านี้โดยใช้ JavaScript และ / หรือวิธีการแก้ปัญหา CSS; สิ่งที่คุณใช้ขึ้นอยู่กับข้อกำหนดที่แน่นอนของคุณ
ฉันจะเริ่มต้นด้วยสิ่งที่ถือว่าเป็นวิธี "ดีที่สุด" อย่างกว้างขวาง:
1) เพิ่ม / ลบคลาสที่กำหนดไว้ล่วงหน้า
ในวิธีการนี้คุณได้สร้างคลาสใน CSS ของคุณด้วยสไตล์ที่แตกต่าง:afterหรือ:beforeไม่ วางคลาส "ใหม่" นี้ในภายหลังในสไตล์ชีทของคุณเพื่อให้แน่ใจว่ามีการแทนที่:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
จากนั้นคุณสามารถเพิ่มหรือลบคลาสนี้โดยใช้ jQuery (หรือวานิลลา JavaScript):
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- จุดเด่น:ใช้งานง่ายด้วย jQuery; เปลี่ยนแปลงอย่างรวดเร็วหลายรูปแบบในครั้งเดียว บังคับให้แยกข้อกังวลออกจากกัน (แยก CSS และ JS ออกจาก HTML)
- จุดด้อย: CSS จะต้องเขียนไว้ล่วงหน้าดังนั้นเนื้อหาของ
:beforeหรือ:afterไม่ไดนามิกทั้งหมด
2) เพิ่มสไตล์ใหม่ไปยังสไตล์ชีทของเอกสารโดยตรง
เป็นไปได้ที่จะใช้ JavaScript เพื่อเพิ่มสไตล์โดยตรงไปที่สไตล์ชีทเอกสารรวมถึง:afterและ:beforeสไตล์ jQuery ไม่มีทางลัดที่สะดวก แต่โชคดีที่ JS ไม่ซับซ้อน:
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()และ.insertRule()วิธีการที่เกี่ยวข้องได้รับการสนับสนุนอย่างดีพอสมควรในปัจจุบัน
ในรูปแบบที่หลากหลายคุณยังสามารถใช้ jQuery เพื่อเพิ่มสไตล์ชีทใหม่ทั้งหมดลงในเอกสารได้ แต่โค้ดที่จำเป็นนั้นไม่ได้สะอาดกว่า:
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
หากเรากำลังพูดถึง "การจัดการ" ค่าต่าง ๆ ไม่เพียง แต่เพิ่มเข้าไปในค่านั้นเรายังสามารถอ่านค่าที่มีอยู่:afterหรือ:beforeสไตล์โดยใช้วิธีการอื่น:
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
เราสามารถแทนที่document.querySelector('p')ด้วย$('p')[0]เมื่อใช้ jQuery สำหรับรหัสที่สั้นกว่าเล็กน้อย
- จุดเด่น:สตริงใด ๆ สามารถแทรกลงในสไตล์แบบไดนามิก
- ข้อด้อย:รูปแบบดั้งเดิมจะไม่เปลี่ยนแปลง แต่ถูกแทนที่เท่านั้น การใช้ซ้ำ (ab) สามารถทำให้ DOM เติบโตขึ้นโดยพลการขนาดใหญ่
3) แก้ไขแอตทริบิวต์ DOM อื่น
คุณยังสามารถใช้attr()ใน CSSเพื่ออ่านแอตทริบิวต์ DOM เฉพาะ ( หากเบราว์เซอร์รองรับ:beforeก็รองรับattr()เช่นกัน ) ด้วยการรวมสิ่งนี้เข้ากับcontent:CSS ที่เตรียมไว้อย่างรอบคอบเราสามารถเปลี่ยนเนื้อหา (แต่ไม่ใช่คุณสมบัติอื่น ๆเช่นขอบหรือสี) ของ:beforeและ:afterแบบไดนามิก:
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS:
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
สิ่งนี้สามารถนำมารวมกับเทคนิคที่สองได้หาก CSS ไม่สามารถเตรียมพร้อมล่วงหน้า:
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- จุดเด่น:ไม่ได้สร้างสไตล์พิเศษอย่างไม่มีที่สิ้นสุด
- ข้อด้อย:
attrใน CSS สามารถใช้กับสตริงเนื้อหาเท่านั้นไม่ใช่ URL หรือสี RGB