JQuery හට කළ හැකි අනෙක් සියල්ල සමඟ මෙය පිළිතුරු දීමට සරල ප්‍රශ්නයක් වනු ඇතැයි ඔබ සිතනු ඇත. අවාසනාවකට මෙන්, ගැටළුව තාක්ෂණික ගැටළුවකට එළඹේ : css: after and: before rules DOM හි කොටසක් නොවන අතර එබැවින් jQuery හි DOM ක්රම භාවිතයෙන් වෙනස් කළ නොහැක.
එහි සිටින JavaScript යොදා ගනිමින් මෙම මූලද්රව්ය හා / හෝ CSS උත්සහ හැසිරවීමට ක්රම; ඔබ භාවිතා කරන දේ ඔබගේ නිශ්චිත අවශ්‍යතා මත රඳා පවතී.
මම ආරම්භ කිරීමට යන්නේ “හොඳම” ප්රවේශය ලෙස පුළුල් ලෙස සලකන දේ සමඟ ය:
1) කලින් තීරණය කළ පන්තියක් එක් කරන්න / ඉවත් කරන්න
මෙම ප්‍රවේශයේදී, ඔබ දැනටමත් ඔබේ CSS හි වෙනස් :afterහෝ :beforeශෛලියක් සහිත පන්තියක් නිර්මාණය කර ඇත. මෙම "නව" පන්තිය පසුකාලීනව ඔබගේ මෝස්තර පත්‍රිකාවේ එය ඉක්මවා යන බවට වග බලා ගන්න:
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
එවිට ඔබට පහසුවෙන් jQuery (හෝ වැනිලා ජාවාස්ක්‍රිප්ට්) භාවිතයෙන් මෙම පන්තිය එක් කිරීමට හෝ ඉවත් කිරීමට හැකිය:
$('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) ලේඛනයේ මෝස්තර පත්‍රයට කෙලින්ම නව මෝස්තර එකතු කරන්න
එය ඇතුළුව, ලේඛනය stylesheet කෙලින්ම මෝස්තර එකතු කිරීමට 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>
තරමක් කෙටි කේතයක් සඳහා jQuery භාවිතා document.querySelector('p')කරන $('p')[0]විට අපට එය ප්‍රතිස්ථාපනය කළ හැකිය .
- වාසි: ඕනෑම නූලක් ගතිකව ශෛලියට ඇතුළත් කළ හැකිය
- අවාසි: මුල් මෝස්තර වෙනස් කර නැත, අභිබවා ඇත; නැවත නැවත (ab) භාවිතා කිරීමෙන් DOM අත්තනෝමතික ලෙස විශාල විය හැක
3) වෙනස් DOM ලක්ෂණයක් වෙනස් කරන්න
විශේෂිත DOM ලක්ෂණයක් කියවීමට ඔබේ CSS හි භාවිතාattr() කළ හැකිය . ( බ්‍රව්සරයක් සහය දක්වන්නේ නම් :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 වර්ණ නොව අන්තර්ගත නූල් වලට පමණි