javascript - एमएल - टेम्पिेट का उपयोग कर front page 2000 में एक वेब पेज बनाने का वर्णन करें




आवेदन कैसे करें! सीएसएस() का उपयोग करना महत्वपूर्ण है? (20)

मुझे एक ऐसी शैली लागू करने में परेशानी हो रही है जो !important है !important मैंने कोशिश की:

$("#elem").css("width", "100px !important");

यह कुछ भी नहीं करता है; कोई चौड़ाई शैली जो भी लागू होती है। क्या cssText को ओवरराइट किए बिना ऐसी शैली को लागू करने का एक jQuery-ish तरीका है (जिसका मतलब है कि मुझे इसे पहले पार्स करना होगा, आदि)?

संपादित करें : मुझे यह जोड़ना चाहिए कि मेरे पास एक स्टाइलशीट है जिसमें एक !important शैली है जिसे मैं एक !important शैली की इनलाइन के साथ ओवरराइड करने की कोशिश कर रहा हूं, इसलिए .width() का उपयोग .width() और जैसा काम नहीं करता है क्योंकि यह मेरी बाहरी !important शैली से ओवरराइड हो जाता है ।

साथ ही, पिछले मान को ओवरराइड करने वाला मान गणना की जाती है , इसलिए मैं बस एक और बाहरी शैली नहीं बना सकता।


3 कामकाजी उदाहरण

मेरे पास एक समान स्थिति थी, लेकिन मैंने कई बदलावों के साथ लंबे समय तक .closest () के साथ संघर्ष करने के बाद .find () का उपयोग किया।

उदाहरण कोड

// allows contains fuction to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack){
result = false;
theList = meta[3].split("','");
var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
for (x=0;x<theList.length;x++) {
if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
return true;}} return false;};

$(document).ready(function() { var refreshId = setInterval( function() {
$("#out:contains('foo','test456')").find(".inner").css( 'width', '50px', 'important' );
}, 1000); //rescans every 1000ms
}); 

विकल्प

$( '.inner' ).each(function () {
this.style.setProperty( 'height', '50px', 'important' );
});

$('#out').find('.inner').css({ 'height': '50px'});

यदि आपको कोई उपयोग मिलता है तो धन्यवाद वोट, धन्यवाद।

कार्य करना: http://jsfiddle.net/fx4mbp6c/


@ अरामकोचर्यन के उत्तर की जटिलता पर जाने की आवश्यकता नहीं है, न ही किसी भी शैली टैग को गतिशील रूप से डालने की आवश्यकता है।

बस शैली को ओवरराइट करें, लेकिन आपको कुछ भी पार्स करने की ज़रूरत नहीं है, आप क्यों?

//accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

removeProperty() उपयोग नहीं कर सकता क्योंकि यह क्रोम में !important नियमों को हटा नहीं देगा !important
element.style[property] = '' उपयोग नहीं कर सकता क्योंकि यह केवल फ़ायरफ़ॉक्स में camelCase स्वीकार करता है।

आप संभवतः jQuery के साथ यह छोटा कर सकते हैं, लेकिन यह वेनिला फ़ंक्शन आधुनिक ब्राउज़र, आईई 8 आदि पर चलाएगा


आप इसे दो तरीकों से प्राप्त कर सकते हैं:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

आप सीधे चौड़ाई सेट कर सकते हैं .width() इस तरह:

$("#elem").width(100);

टिप्पणियों के लिए अपडेट किया गया: आपके पास यह विकल्प भी है, लेकिन यह तत्व पर सभी सीएसएस को प्रतिस्थापित करेगा, इसलिए सुनिश्चित नहीं है कि यह और अधिक व्यवहार्य है:

$('#elem').css('cssText', 'width: 100px !important');

एफवाईआई, यह काम नहीं करता है क्योंकि jQuery इसका समर्थन नहीं करता है। 2012 में एक टिकट दायर किया गया था ( # 11173 $ (elem)। सीएसएस ("संपत्ति", "मूल्य! महत्वपूर्ण") विफल रहता है ) जिसे अंततः WONTFIX के रूप में बंद कर दिया गया था।


ऐसा क्यों न करें:

$("#elem").get(0).style.width= "100px!important";

किंडा देर से लेकिन इस समस्या का सामना करने के बाद मैंने क्या किया ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style',origStyleContent+';width:150px !important');

तुम यह केर सकते हो:

$("#elem").css("cssText", "width: 100px !important;");

संपत्ति नाम के रूप में "cssText" का उपयोग करना और जो कुछ भी आप सीएसएस में जोड़ना चाहते हैं, उसके मूल्य के रूप में।


मुझे लगता है कि आपने महत्वपूर्ण जोड़ने के बिना कोशिश की है?
इनलाइन सीएसएस (जो कि जेएस स्टाइल जोड़ता है) स्टाइलशीट सीएसएस ओवरराइड करता है। मुझे पूरा यकीन है कि स्टाइलशीट सीएसएस नियम होने पर भी मामला है! महत्वपूर्ण।

एक और सवाल (शायद एक बेवकूफ सवाल लेकिन पूछा जाना चाहिए।): वह तत्व है जिसे आप काम करने की कोशिश कर रहे हैं, क्या यह प्रदर्शित होता है: ब्लॉक; या प्रदर्शन: इनलाइन-ब्लॉक; ?

सीएसएस में अपनी विशेषज्ञता को नहीं जानते .. इनलाइन तत्व हमेशा व्यवहार नहीं करते हैं जैसा आप उम्मीद करेंगे।


मुझे लगता है कि मुझे एक असली समाधान मिला है। मैंने इसे एक नए समारोह में बनाया है:

jQuery.style(name, value, priority);

आप इसे .css('name') साथ .style('name') साथ मान प्राप्त करने के लिए उपयोग कर सकते हैं, .style() साथ .style() प्राप्त करें, और मान भी सेट करें - प्राथमिकता को 'महत्वपूर्ण' के रूप में निर्दिष्ट करने की क्षमता के साथ । इसे देखें

डेमो

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

आउटपुट यहां है:

null
red
blue
important

कार्यक्रम

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

सीएसएस मानों को पढ़ने और सेट करने के उदाहरणों के उदाहरण के लिए this देखें। मेरा मुद्दा यह था कि मैंने पहले से ही सेट किया था !important मेरे सीएसएस में चौड़ाई के लिए अन्य थीम सीएसएस के साथ संघर्ष से बचने के लिए !important , लेकिन jQuery में चौड़ाई में किए गए कोई भी बदलाव अप्रभावित होंगे क्योंकि उन्हें स्टाइल एट्रिब्यूट में जोड़ा जाएगा।

अनुकूलता

setProperty फ़ंक्शन का उपयोग करके प्राथमिकता के साथ सेटिंग के लिए, यह आलेख कहता है कि IE 9+ और अन्य सभी ब्राउज़रों के लिए समर्थन है। मैंने आईई 8 के साथ प्रयास किया है और यह असफल रहा है, यही कारण है कि मैंने अपने कार्यों में इसके लिए समर्थन बनाया (ऊपर देखें)। यह सेटप्रोपर्टी का उपयोग कर अन्य सभी ब्राउज़रों पर काम करेगा, लेकिन इसे <IE 9 में काम करने के लिए मेरे कस्टम कोड की आवश्यकता होगी।


मेरे द्वारा इस समस्या के लिए सबसे आसान और सबसे अच्छा समाधान बस .css () या .attr () के बजाय addClass () का उपयोग करना था।

उदाहरण के लिए:

$('#elem').addClass('importantClass');

और आपकी सीएसएस फ़ाइल में:

.importantClass {
    width: 100px !important;
}

मैंने यह भी पाया कि कुछ तत्व या एड-ऑन (बूटस्ट्रैप की तरह) में कुछ विशेष वर्ग के मामले हैं जहां वे अच्छी तरह से नहीं खेलते हैं !important या अन्य कार्य-आसपास जैसे .addClass/.removeClass , और इस प्रकार आपको उन्हें टॉगल करना होगा / बंद।

उदाहरण के लिए, यदि आप <table class="table-hover"> जैसे कुछ का उपयोग करते हैं <table class="table-hover"> पंक्तियों के रंगों जैसे तत्वों को सफलतापूर्वक संशोधित करने का एकमात्र तरीका table-hover क्लास को चालू / बंद करना है, इस तरह

$(your_element).closest("table").toggleClass("table-hover");

उम्मीद है कि यह काम किसी के लिए सहायक होगा! :)


यह आपकी स्थिति के लिए उपयुक्त हो सकता है या नहीं भी हो सकता है लेकिन आप इनमें से कई स्थितियों के लिए सीएसएस चयनकर्ताओं का उपयोग कर सकते हैं।

यदि, उदाहरण के लिए आप .cssText के तीसरे और 6 वें उदाहरणों की एक अलग चौड़ाई रखने के लिए चाहते थे, तो आप लिख सकते हैं:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

या:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

यह समाधान पिछली शैलियों में से किसी एक को ओवरराइड नहीं करता है, यह केवल आपको आवश्यकतानुसार लागू करता है:

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

सिर में शैली को जोड़ने का एक वैकल्पिक तरीका

$('head').append('<style> #elm{width:150px !important} </style>');

यह आपकी सभी सीएसएस फाइलों के बाद शैली को जोड़ता है, इसलिए यह अन्य सीएसएस फाइलों की तुलना में अधिक प्राथमिकता रखेगा और लागू किया जाएगा


स्टाइल विशेषता जोड़ने के इस समस्या को हल करने के लिए एक और आसान तरीका:

$('.selector').attr('style', 'width:500px !important');

हमें पहले पिछली शैली को हटाने की जरूरत है। मैं नियमित रूप से उपयोग हटा देता हूं। मैं आपको रंग बदलने के लिए एक उदाहरण भेजता हूं, ...

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

https://jsfiddle.net/xk6Ut/256/

जावास्क्रिप्ट में सीएसएस क्लास को गतिशील रूप से बनाने और अपडेट करने का एक वैकल्पिक दृष्टिकोण है। ऐसा करने के लिए, हम शैली तत्व का उपयोग कर सकते हैं और शैली तत्व के लिए आईडी को नियोजित करने की आवश्यकता है ताकि हम सीएसएस वर्ग को अपडेट कर सकें

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

  var cssText = '.testDIV{ height:' + height + 'px !important; }';
  writeStyles('styles_js', cssText)

डेविड थॉमस का जवाब $('#elem').attr('style', …) का उपयोग करने का एक तरीका बताता है $('#elem').attr('style', …) , लेकिन चेतावनी देता है कि इसका उपयोग style विशेषता में पूर्व-सेट शैलियों को हटा देगा। यहां समस्या के बिना attr() का उपयोग करने का एक तरीका है:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

एक समारोह के रूप में:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}
addStyleAttribute($('#elem'), 'width: 100px !important');

यहां एक जेएस बिन डेमो है


var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');






css