.Css () ශ්‍රිතය සමඟ එකතු කළ ශෛලියක් ඉවත් කරන්නේ කෙසේද?

මම jQuery සමඟ CSS වෙනස් කරන අතර ආදාන අගය මත පදනම්ව මා එකතු කරන මෝස්තරය ඉවත් කිරීමට කැමැත්තෙමි:

if(color != '000000') $("body").css("background-color", color); else // remove style ?

මට මෙය කළ හැක්කේ කෙසේද?
වර්ණ අච්චාරුවක් භාවිතා කරමින් වර්ණයක් තෝරාගත් සෑම අවස්ථාවකම ඉහත රේඛාව ක්‍රියාත්මක වන බව සලකන්න (එනම් මූසිකය වර්ණ රෝදයක් හරහා ගමන් කරන විට).

දෙවන සටහන: මට මෙය කළ නොහැක්කේ css("background-color", "none")එය CSS ලිපිගොනු වලින් පෙරනිමි මෝස්තරය ඉවත් කරන බැවිනි .
මට අවශ්‍ය වන්නේ jQuerybackground-color විසින් එකතු කරන ලද පේළිගත ශෛලිය ඉවත් කිරීමට ය .

දේපල හිස් නූලකට වෙනස් කිරීම කාර්යය කරන බව පෙනේ:

$.css("background-color", "");

පිළිගත් පිළිතුර ක්‍රියාත්මක වන නමුත් styleමගේ පරීක්ෂණ වලදී DOM හි හිස් ලක්ෂණයක් තබයි. ලොකු දෙයක් නැත, නමුත් මෙය සියල්ල ඉවත් කරයි:

removeAttr( 'style' );

මෙය ඔබට සියලු ගතික මෝස්තර ඉවත් කර නැවත ස්ටයිල් ෂීට් මෝස්තරයට යාමට අවශ්‍ය යැයි උපකල්පනය කරයි.

JQuery භාවිතා කරමින් CSS දේපලක් ඉවත් කිරීමට ක්‍රම කිහිපයක් තිබේ:

1. CSS දේපල එහි පෙරනිමි (ආරම්භක) අගයට සැකසීම

.css("background-color", "transparent")

එම්ඩීඑන් හි CSS දේපල සඳහා ආරම්භක අගය බලන්න . මෙහි පෙරනිමි අගය වේ transparent. inheritඑහි මවුපියන්ගෙන් ගුණාංගය උරුම කර ගැනීම සඳහා ඔබට CSS ගුණාංග කිහිපයක් භාවිතා කළ හැකිය . CSS3 / CSS4 දී, ඔබ ද භාවිතා කළ හැක initial, revertහෝ unsetනමුත් මෙම ප්රධාන වචන සීමිත බ්රවුසරය සහාය විය හැක.

2. CSS දේපල ඉවත් කිරීම

හිස් නූලක් CSS දේපල ඉවත් කරයි, එනම්

.css("background-color","")

නමුත් jQuery .css () ප්‍රලේඛනයේ දක්වා ඇති පරිදි පරෙස්සම් වන්න, මෙය දේපල ඉවත් කරන නමුත් පසුබිම ඇතුළුව ඇතැම් CSS කෙටිකාලීන ගුණාංග සඳහා IE8 සමඟ අනුකූලතා ගැටළු ඇත .

ශෛලීය දේපලක වටිනාකම හිස් නූලකට සැකසීම - උදා. $ ('# Mydiv'). Css ('color', '') - HTML ශෛලිය තුළ වේවා, මූලද්‍රව්‍යයක් දැනටමත් සෘජුවම යොදවා ඇත්නම් එම දේපල ඉවත් කරයි. ආරෝපණය, jQuery හි .css () ක්‍රමය හරහා හෝ ශෛලීය දේපල සෘජුවම DOM හැසිරවීම හරහා. කෙසේ වෙතත්, එය CSS රීතියක් සමඟ මෝස්තර පත්‍රිකාවක හෝ අංගයක ඉවත් කර නැත. අවවාදයයි: සැලකිය යුතු ව්‍යතිරේකයක් නම්, IE 8 සහ ඊට පහළින්, මායිම හෝ පසුබිම වැනි කෙටිකාලීන දේපලක් ඉවත් කිරීමෙන්, එම ශෛලිය මුලුමනින්ම මූලද්‍රව්‍යයෙන් ඉවත් කරනු ඇත .

3. මූලද්රව්යයේ සමස්ත ශෛලිය ඉවත් කිරීම

.removeAttr("style")

පිරිසිදු ජාවාස්ක්‍රිප්ට් සමඟ විලාසිතාවේ ගුණාංගයක් ඉවත් කිරීමට මට ක්‍රමයක් ලැබුණි

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');

මෙය සම්පූර්ණ ටැගය ඉවත් කරයි:

  $("body").removeAttr("style");

මෙම jQuery කාර්යයන් වලින් එකක් හෝ ක්‍රියා කළ යුතුය:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

භාවිතා කිරීම:

$('.tag-class').removeAttr('style');

හෝ

$('#tag-id').removeAttr('style');

වැනි දෙයක් ගැන:

var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}

මගේ ප්ලගිනය භාවිතා කරන්න:

$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

ඔබේ නඩුව සඳහා, එය පහත පරිදි භාවිතා කරන්න:

$(<mySelector>).removeCss();

හෝ

$(<mySelector>).removeCss(false);

ඔබට ඉවත් කිරීමට අවශ්‍ය නම් එහි පන්තිවල අර්ථ දක්වා ඇති CSS:

$(<mySelector>).removeCss(true);

මේක උත්සාහ කරන්න:

$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

ස්තූතියි

ඔබ CSS විලාසය භාවිතා කරන්නේ නම්, ඔබට මෙය භාවිතා කළ හැකිය:

$("#element").css("background-color","none"); 

ඉන්පසු ආදේශ කරන්න:

$("#element").css("background-color", color);

ඔබ CSS ශෛලිය භාවිතා නොකරන්නේ නම් සහ ඔබට HTML අංගයේ ගුණාංග තිබේ නම්, ඔබට මෙය භාවිතා කළ හැකිය:

$("#element").attr("style.background-color",color);

2018

ඒ සඳහා ස්වදේශීය API ඇත

element.style.removeProperty(propery)

මේකත් වැඩ කරනවා !!

$elem.attr('style','');

ඔබ CSS පන්තියක් ඉවත් කිරීමට කැමති විලාසය සාදා නොගන්නේ මන්ද? දැන් ඔබට භාවිතා කළ හැකිය : .removeClass(). මෙය භාවිතා කිරීමේ හැකියාව ද විවෘත කරයි:.toggleClass()

(පන්තිය තිබේ නම් එය ඉවත් කරන්න, එය නොමැති නම් එය එක් කරන්න.)

පිරිසැලසුම් ගැටළු සමඟ කටයුතු කිරීමේදී පන්තියක් එකතු කිරීම / ඉවත් කිරීම වෙනස් කිරීම / දෝශ නිරාකරණය කිරීම අඩු ව්‍යාකූල වේ (විශේෂිත ශෛලියක් අතුරුදහන් වූයේ මන්දැයි සොයා ගැනීමට උත්සාහ කිරීමට වඩා වෙනස්ව.)

let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))

මෙය වෙනත් විසඳුම් වලට වඩා සංකීර්ණ ය, නමුත් අවස්ථා වලදී වඩාත් නම්‍යශීලී බවක් ලබා දිය හැකිය:

1) ඔබට අයදුම් කිරීමට / තෝරා ගැනීමට අවශ්‍ය මෝස්තරය හුදකලා කිරීමට (වටකර ගැනීමට) පන්ති අර්ථ දැක්වීමක් කරන්න. එය හිස් විය හැකිය (මෙම අවස්ථාව සඳහා බොහෝ විට විය යුතුය):

.myColor {}

2) මත පදනම් වූ, මෙම කේතය භාවිතා http://jsfiddle.net/kdp5V/167/ සිට මෙම පිළිතුර විසින් gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

භාවිත උදාහරණය: http://jsfiddle.net/qvkwhtow/

ගුහා:

• පුළුල් ලෙස පරීක්ෂා කර නැත.
• නව වටිනාකමට වැදගත් හෝ වෙනත් විධානයන් ඇතුළත් කළ නොහැක . මෙම උපාමාරු මගින් දැනට පවත්නා ඕනෑම නියෝගයක් නැති වී යයි.
• ස්ටයිල් සෙලෙක්ටරයක සිදුවීම මුලින්ම සොයාගත් වෙනස්කම් පමණි. සම්පූර්ණ මෝස්තර එකතු කිරීම හෝ ඉවත් කිරීම නොකරයි, නමුත් මෙය වඩාත් සවිස්තරාත්මකව කළ හැකිය.
• අවලංගු / භාවිතා කළ නොහැකි අගයන් නොසලකා හරිනු ඇත.
• ක්‍රෝම් හි (අවම වශයෙන්), දේශීය නොවන (හරස් අඩවි වල මෙන්) CSS රීති document.styleSheets වස්තුව හරහා නිරාවරණය නොවේ, එබැවින් මෙය ඒවා ක්‍රියාත්මක නොවේ. මෙම කේතයේ "මුලින් සොයාගත්" හැසිරීම මතක තබා ගනිමින් යමෙකුට දේශීය අතිච්ඡාදනයන් එකතු කර එය හැසිරවිය යුතුය.
• document.styleSheets පොදුවේ හැසිරවීමට මිත්‍රශීලී නොවේ, මෙය ආක්‍රමණශීලී භාවිතය සඳහා ක්‍රියා කරනු ඇතැයි අපේක්ෂා නොකරන්න.

මෝස්තරය මේ ආකාරයෙන් හුදකලා කිරීම යනු CSS යනු කුමක් වුවත්, එය හැසිරවීම නොවේ. CSS නීති හැසිරවීම යනු jQuery යනු කුමක් ද යන්න නොවේ, jQuery DOM අංග හැසිරවීම සහ එය කිරීමට CSS තේරීම් භාවිතා කරයි.

වෙබ් සංවර්ධනයේදී සරලයි. විශේෂිත ශෛලියක් ඉවත් කිරීමේදී හිස් නූල් භාවිතා කිරීම මම නිර්දේශ කරමි

$(element).style.attr = '  ';

මේක උත්සාහ කරන්න

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');

ඔබ භාවිතයෙන් විලාසය ඉවත් කරයි

removeAttr( 'style' );

ඔයාට පාවිච්චි කරන්න පුළුවන්:

 $("#eslimi").removeAttr("style").hide();

උත්සාහ කරන්න

document.body.style=''

$("body").css("background-color", 'red');

function clean() {
  document.body.style=''
}

body { background-color: yellow; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clean()">Remove style</button>