පන්ති වෙනස් කිරීම සඳහා නවීන HTML5 තාක්ෂණික ක්රම
නවීන බ්රවුසරයන් එකතු කර ඇත classList පහසු පුස්තකාල යාමකින් තොරව පන්ති මෙහෙයවීම සඳහා කිරීමට ක්රම සපයන:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
අවාසනාවකට මෙන්, මේවා v10 ට පෙර ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි ක්‍රියා නොකරයි, නමුත් මෙම පිටුවෙන් ලබා ගත හැකි IE8 සහ IE9 සඳහා සහය එක් කිරීමට ෂිම් එකක් ඇත . එහෙත්, එය වැඩි වැඩියෙන් සහාය ලබා ගැනීමකි .
සරල හරස් බ්රවුසර විසඳුමක්
මූලද්රව්යයක් තෝරා ගැනීම සඳහා සම්මත ජාවාස්ක්රිප්ට් ක්රමය භාවිතා කරයි document.getElementById("Id"), එය පහත උදාහරණ භාවිතා කරයි - ඔබට ඇත්ත වශයෙන්ම වෙනත් ආකාරවලින් මූලද්‍රව්‍ය ලබා ගත හැකි අතර නිවැරදි තත්වයේදී සරලව භාවිතා කළ හැකියthis ඒ වෙනුවට - කෙසේ වෙතත්, මේ පිළිබඳව විස්තරාත්මකව බැලීම සීමාවෙන් ඔබ්බට ය පිළිතුරේ.
මූලද්රව්යයක් සඳහා සියලු පන්ති වෙනස් කිරීමට:
පවත්නා සියලුම පන්ති නව පන්ති එකක් හෝ කිහිපයක් සමඟ ප්රතිස්ථාපනය කිරීමට, පන්තියේ නම ගුණාංගය සකසන්න:
document.getElementById("MyElement").className = "MyClass";
(ඔබට බහු පන්ති යෙදීම සඳහා අවකාශය වෙන් කළ ලැයිස්තුවක් භාවිතා කළ හැකිය.)
මූලද්රව්යයකට අතිරේක පන්තියක් එක් කිරීමට:
මූලද්රව්යයකට පන්තියක් එක් කිරීමට, පවතින අගයන් ඉවත් නොකර / බලපාන්නේ නැතිව, අවකාශයක් සහ නව පන්ති නාමය එකතු කරන්න,
document.getElementById("MyElement").className += " MyClass";
මූලද්‍රව්‍යයකින් පන්තියක් ඉවත් කිරීමට:
මූලද්රව්යයකට තනි පන්තියක් ඉවත් කිරීම සඳහා, වෙනත් විභව පන්ති වලට බලපෑමක් නොකර, සරල රීජෙක්ස් ප්රතිස්ථාපනය අවශ්ය වේ:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
මෙම රීජෙක්ස් පිළිබඳ පැහැදිලි කිරීමක් පහත පරිදි වේ:
(?:^|\s) # Match the start of the string, or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be end of string or a space)
එම g ධජය අවශ්ය ලෙස නැවත කිරීමට වෙනුවට, නඩුවේ පන්ති නම කීප වරක් එකතු කර ඇත, පවසයි.
මූලද්රව්යයකට පන්තියක් දැනටමත් යොදවා ඇත්දැයි පරීක්ෂා කිරීමට:
පංතියක් ඉවත් කිරීම සඳහා ඉහත භාවිතා කළ රීජෙක්ස් විශේෂිත පන්තියක් තිබේද යන්න පරීක්ෂා කිරීමක් ලෙසද භාවිතා කළ හැකිය:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
ඔන්ක්ලික් සිදුවීම් සඳහා මෙම ක්‍රියා පැවරීම:
ජාවාස්ක්රිප්ට් කෙලින්ම HTML සිදුවීම් ගුණාංග තුළ ලිවීමට හැකි අතර (වැනි onclick="this.className+=' MyClass'" ) මෙය නිර්දේශිත හැසිරීම නොවේ. විශේෂයෙන් විශාල යෙදුම් වලදී, ජාවාස්ක්රිප්ට් අන්තර්ක්‍රියා තර්කනයෙන් HTML සලකුණු වෙන් කිරීමෙන් වඩාත් නඩත්තු කළ හැකි කේතයක් ලබා ගත හැකිය.
මෙය සාක්ෂාත් කර ගැනීමේ පළමු පියවර වන්නේ ශ්‍රිතයක් නිර්මාණය කිරීම සහ ඔන්ක්ලික් ගුණාංගයේ ශ්‍රිතය ඇමතීම ය.
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onclick="changeClass()">My Button</button>
(මෙම කේතය ස්ක්‍රිප්ට් ටැග් වල තිබීම අවශ්ය නොවේ, මෙය හුදෙක් නිදසුනෙහි සාරාංශය සඳහා වන අතර, විශේෂ ගොනුවක ජාවාස්ක්රිප්ට් ඇතුළත් කිරීම වඩාත් යෝග්‍ය වේ.)
දෙවන පියවර වන්නේ ඔන්ක්ලික් සිදුවීම HTML වලින් සහ ජාවාස්ක්රිප්ට් වෙත ගෙන යාමයි, උදාහරණයක් ලෙස addEventListener භාවිතා කිරීම
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
( HTML පැටවීම අවසන් වූ පසු එම ශ්‍රිතයේ අන්තර්ගතය ක්‍රියාත්මක වන පරිදි window.onload කොටස අවශ්ය බව සලකන්න - මෙය නොමැතිව, ජාවාස්ක්රිප්ට් කේතය කැඳවූ විට MyElement නොපවතින බැවින් එම රේඛාව අසාර්ථක වනු ඇත.)
ජාවාස්ක්රිප්ට් රාමු සහ පුස්තකාල
ඉහත කේතය සියල්ලම සම්මත ජාවාස්ක්රිප්ට් වල ඇත, කෙසේ වෙතත් පොදු කාර්යයන් සරල කිරීම සඳහා රාමුවක් හෝ පුස්තකාලයක් භාවිතා කිරීම සාමාන්‍ය සිරිතකි, එසේම ඔබේ කේතය ලිවීමේදී ඔබ නොසිතන ස්ථාවර දෝෂ සහ අද්දර අවස්ථා වලින් ප්‍රයෝජන ලබා ගැනීම.
පංතියක් වෙනස් කිරීම සඳහා K 50 KB රාමුවක් එක් කිරීම සමහර අය අධික ලෙස සලකන අතර, ඔබ සැලකිය යුතු ප්‍රමාණයේ ජාවාස්ක්රිප්ට් වැඩක් කරන්නේ නම් හෝ අසාමාන්‍ය හරස් බ්‍රව්සර් හැසිරීමක් ඇති ඕනෑම දෙයක් නම්, එය සලකා බැලීම වටී.
(ඉතා දළ වශයෙන්, පුස්තකාලයක් යනු නිශ්චිත කාර්යයක් සඳහා නිර්මාණය කර ඇති මෙවලම් සමූහයකි, රාමුවක් තුළ සාමාන්‍යයෙන් පුස්තකාල කිහිපයක් අඩංගු වන අතර සම්පූර්ණ රාජකාරි මාලාවක් ඉටු කරයි.)
ඉහත උදාහරණ jQuery භාවිතයෙන් පහත ප්‍රතිනිෂ්පාදනය කර ඇත , බොහෝ විට බහුලව භාවිතා වන ජාවාස්ක්රිප්ට් පුස්තකාලය (විමර්ශනය කිරීමට වටින තවත් ඒවා ඇතත්).
( $මෙහි jQuery වස්තුව බව සලකන්න .)
JQuery සමඟ පන්ති වෙනස් කිරීම:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
ඊට අමතරව, පංතියක් අදාළ නොවන්නේ නම් එකතු කිරීම හෝ එසේ කරන පන්තියක් ඉවත් කිරීම සඳහා කෙටිමඟක් jQuery සපයයි:
$('#MyElement').toggleClass('MyClass');
JQuery සමඟ ක්ලික් කිරීමේ සිදුවීමකට ශ්‍රිතයක් පැවරීම:
$('#MyElement').click(changeClass);
හෝ, හැඳුනුම්පතක් අවශ්ය නොවී:
$(':button:contains(My Button)').click(changeClass);