मैं जावास्क्रिप्ट में कई सीएसएस शैलियों को कैसे सेट कर सकता हूं?

Question

मेरे पास निम्नलिखित जावास्क्रिप्ट चर हैं:

var fontsize = "12px"
var left= "200px"
var top= "100px"

मुझे पता है कि मैं उन्हें अपने तत्व में इसे इस तरह सेट कर सकता हूं:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

क्या उन सभी को एक साथ सेट करना संभव है, कुछ इस तरह से?

document.getElementById("myElement").style = allMyStyle 

Comments

allMyStyleआपके उदाहरण में क्या होगा ? शुरुआत में आपके पास एकल चर की एक सूची है ...

— फेलिक्स क्लिंग

font-size: 12px; छोड़ दिया: 200px; शीर्ष: 100px

— Mircea

यदि यह काम करता है, तो यह एक स्ट्रिंग होगी जिसमें सभी CSS सेट की जानी चाहिए: document.getElementById ("myElement")। style = font-size: 12px; छोड़ दिया: 200px; शीर्ष: 100px

— Mircea

@ मिरीका: मेरे जवाब पर एक नजर .... आप उपयोग कर सकते हैं cssText।

— फेलिक्स क्लिंग

@ फेलिक्स क्लिंग यही है जिसकी मुझे तलाश है। बहुत सारे पुन: प्रवाह और repaints नहीं बना रहे हैं। मुझे यकीन नहीं है कि यह मेरे कोड के साथ काम करेगा लेकिन यह होना चाहिए! थैंक्स

— Mircea

Answer 1

यदि आपके पास CSS मान स्ट्रिंग के रूप में है और तत्व के लिए पहले से कोई अन्य CSS सेट नहीं है (या आप ओवरराइटिंग की परवाह नहीं करते हैं), cssTextसंपत्ति का उपयोग करें :

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

यह एक मायने में अच्छा है क्योंकि यह तत्व को हर बार जब आप संपत्ति बदलते हैं (तो आप उन सभी को "एक बार" किसी भी तरह से बदल देते हैं) से बचते हैं।

दूसरी तरफ, आपको पहले स्ट्रिंग का निर्माण करना होगा।

Comments

document.getElementById ("myElement")। style.cssText + = ';' + ccString; element.style.cssText के लिए एक 'सामान्यीकृत' मान लौटाएगा- नया स्ट्रिंग मौजूदा नामित गुणों को किसी भी नए मान के साथ बदल देगा, नए जोड़ देगा और बाकी को अकेला छोड़ देगा।

— केनेबेक

@kennebec: बस यह कोशिश की और आप सही हैं। मुझे नहीं पता था कि, मुझे लगा कि यह पहले से मौजूद पाठ पर निर्भर करता है। लेकिन यह वास्तव में मूल्यों की जगह लेता है ...

— फेलिक्स क्लिंग

मुझे उम्मीद थी कि कोई ऐसा मिलेगा और इसका इस्तेमाल करेगा- मैंने इसे कभी दस्तावेज में नहीं देखा है। अच्छा जवाब, वैसे।

— केनेबेक

@kennebec मैंने jsperf परीक्षण किया है और पाया है कि cssText विधि का उपयोग करने के विरोध में एक अनुक्रम में कई css नियम लागू करना तेज़ है: jsperf.com/csstext-vs-multiple-css-rules/4

— आंद्रेई ओनिगा

@RohitTigga: CSS नियमों से युक्त एक स्ट्रिंग। जैसे display: block; position: absolute;।

— फेलिक्स क्लिंग

Answer 2

Object.assign का उपयोग करना :

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

यह आपको सीएसएस शैली को फिर से लिखने के बजाय शैलियों को मर्ज करने की क्षमता भी देता है।

आप एक शॉर्टकट फ़ंक्शन भी कर सकते हैं:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

Comments

दुख की बात है कि इस विधि IE11 kangax.github.io/compat-table/es6/…

— एंड्रयूस जूल

@AndrewSilver - गैर-संगत ब्राउज़रों में ES6 सुविधाओं के लिए समर्थन प्राप्त करने के लिए कई पॉलीफ़िल पुस्तकालयों में से एक babel && का उपयोग करें।

— पेरिआटा ब्रेटा

बेबल का उपयोग करते समय, यह विधि के साथ जाना है! उत्तम!

— निरजुल

@ नीरजुल इसका उपयोग कैसे करें? मैं कोशिश करता हूं document.querySelector('html').style = Object.assign({}, document.querySelector('html').style, { color: 'red'})लेकिन कुछ नहीं होता है।

— जोनाथन डियॉन

यह पर्याप्त होगा, जैसा कि आप एक साधारण जावास्क्रिप्ट ऑब्जेक्ट का विस्तार करते हैं - सभी में कुछ भी असाइन करने की आवश्यकता नहीं है: Object.assign(document.querySelector('html').style, { color: 'red' });... बस यह सुनिश्चित करें कि शैली को कम तत्व में ओवरराइट नहीं किया गया है। htmlतत्व पर इसका उपयोग करते समय यह बहुत संभावित है ।

— निरजुल

Answer 3

@ मिरीका: एक कथन में एक तत्व के लिए कई शैलियों को सेट करना बहुत आसान है। यह मौजूदा गुणों को प्रभावित नहीं करता है और लूप या प्लगइन्स के लिए जाने की जटिलता से बचा जाता है।

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

BE CAREFUL: यदि, बाद में, आप शैली गुणों को जोड़ने या परिवर्तित करने के लिए इस पद्धति का उपयोग करते हैं, तो 'setAttribute' का उपयोग करके सेट की गई पिछली संपत्तियाँ मिट जाएँगी।

Comments

removeAttributeउन लोगों के लिए काम आ सकता है जो setAttributeस्टाइल को रीसेट करने के लिए उपयोग करने के बारे में सोच रहे होंगे

— che-azeh

Answer 4

इसकी देखभाल करने के लिए एक फ़ंक्शन बनाएं, और इसे उन शैलियों के साथ पैरामीटर पास करें जिन्हें आप बदलना चाहते हैं ..

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

और इसे इस तरह से कॉल करें

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

गुण के अंदर के गुणों के लिए।

Comments

मैं हर बार व्यक्तिगत रूप से .style संपत्ति का उपयोग कर रहा था ताकि मैं एक शैली को बदल न पाऊं, लेकिन यह बेहतर, अधिक संघनित काम करता है।

— ड्रैगन नोव

सबसे अच्छा समाधान, क्योंकि लचीला और cssText के रूप में उपयोगी है, लेकिन तेजी से।

— साइमन स्टाइनबर्गर

Answer 5

जावास्क्रिप्ट लाइब्रेरी आपको इन चीजों को बहुत आसानी से करने की अनुमति देता है

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

---

ऑब्जेक्ट और फॉर-इन-लूप

या, एक बहुत अधिक सुरुचिपूर्ण विधि एक मूल वस्तु और लूप है

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}

Comments

हां, लेकिन इस परियोजना पर मैं jQuery का उपयोग नहीं कर सकता ... Thanx

— Mircea

फॉण्टाइज़ को फॉण्टाइज़ लिखने की आवश्यकता है?

— बीच में

हाँ। स्ट्रिंग संकेतन का उपयोग करते समय भी गुण संवेदनशील होते हैं। यह फ़ॉन्ट होना चाहिए: 12px।

— MyNameIsKo

मैं फ़ॉन्ट-आकार कहूँगा;)

— मिकस

Answer 6

जावास्क्रिप्ट में कई सीएसएस शैली गुण सेट करें

document.getElementById("yourElement").style.cssText = cssString;

या

document.getElementById("yourElement").setAttribute("style",cssString);

उदाहरण:

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");

Answer 7

मैं बस यहाँ ठोकर खाई है और मैं यह देखने के लिए नहीं है कि इसे प्राप्त करने के लिए इतना कोड क्यों आवश्यक है।

एक स्ट्रिंग के रूप में अपने सीएसएस कोड जोड़ें।

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('*').style = styles

a

Comments

मैं इस पद्धति का उपयोग इसलिए भी करता हूं क्योंकि यदि आपके पास अन्य इनलाइन शैलियों नहीं हैं, तो यह उपयोगी है, लेकिन कभी-कभी यह समस्याओं का कारण बनता है।

— Любопытный

यदि समस्याएं आती हैं तो केवल खराब कार्यान्वयन के कारण। यह सब इस बात पर निर्भर करता है कि आप इसे अपने कोड में कब, कहाँ और कैसे लागू करते हैं।

— Thielicious

Answer 8

आपकी सीएसएस फाइलों में अलग-अलग कक्षाएं हो सकती हैं और फिर अपने तत्व को क्लासनाम असाइन कर सकते हैं

या आप शैलियों के गुणों के माध्यम से लूप कर सकते हैं -

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

Comments

यह एक विकल्प नहीं है चूहे चर गतिशील हैं

— Mircea

यह वही नहीं है जो उपयोगकर्ता ने पूछा था, लेकिन यह सबसे व्यवहार्य समाधान है। +1

— रायन काइल

@ सैचिन "फॉन्ट-साइज़" को "फॉन्टसाइज़" के रूप में ऊँट-काज करना होगा। जब तक आप setAttribute का उपयोग नहीं करते, तब तक हाइफ़नेटेड शैली के नाम ब्राउज़रों में काम करने की गारंटी नहीं है।

— अश्विन प्रभु

Answer 9

ऐसा मत सोचो कि यह संभव है।

लेकिन आप शैली परिभाषाओं में से एक वस्तु बना सकते हैं और उनके माध्यम से बस लूप कर सकते हैं।

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

आगे विकसित करने के लिए, इसके लिए एक फ़ंक्शन बनाएं:

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);

Answer 10

सादे जावास्क्रिप्ट का उपयोग करना, आप एक बार में सभी शैलियों को सेट नहीं कर सकते हैं; आपको उनमें से प्रत्येक के लिए एकल लाइनों का उपयोग करने की आवश्यकता है।

हालाँकि, आपको बार-बार document.getElementById(...).style.कोड दोहराने की ज़रूरत नहीं है ; इसे संदर्भित करने के लिए ऑब्जेक्ट चर बनाएं, और आप अपने कोड को और अधिक पठनीय बनाएंगे:

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...आदि। अपने उदाहरण (और स्पष्ट रूप से पढ़ने के लिए बहुत आसान है, बस jQuery के विकल्प के रूप में पढ़ने के लिए आसान)।

(यदि जावास्क्रिप्ट ठीक से डिज़ाइन किया गया था, तो आप withकीवर्ड का उपयोग भी कर सकते थे , लेकिन यह सबसे अच्छा अकेला छोड़ दिया गया है, क्योंकि यह कुछ नाममात्र के मुद्दे पैदा कर सकता है)

Comments

यह सच नहीं है, आप सभी शैलियों को एक साथ सेट कर सकते हैं cssText।

— फेलिक्स क्लिंग

@ फेलिक्स: cssTextइनलाइन स्टाइलशीट वैल्यू सेट करने के लिए ठीक है। हालाँकि, यदि आपने कक्षाएं भी प्राप्त कर ली हैं, या यदि आप केवल कुछ मूल्यों को ओवरराइड करना चाहते हैं, लेकिन सभी नहीं, तो इसका उपयोग करना काफी कठिन हो सकता है cssText। तो तुम सही हो; आप इसे कर सकते हैं, लेकिन मैं इसका उपयोग अधिकांश मामलों के लिए करने की सलाह दूंगा।

— 13

खैर कक्षाएं होने का कोई तर्क नहीं है ... obj.topया सिर्फ obj.style.colorइनलाइन स्टाइलशीट मूल्य भी निर्धारित करता है। और हां, मैंने अपने जवाब में कहा कि कोई व्यक्ति मूल्यों को अधिलेखित कर देगा ... यह संदर्भ पर निर्भर करता है कि यह उपयोगी है या नहीं।

— फेलिक्स क्लिंग

आप बेहतर तरीके से उस obj = document.getElementById ("myElement") शैली को बनाते हैं। या अपने गुणों को सेट करें obj.style.top = शीर्ष।

— kennebec

@kennebec - हम्म, मैंने कसम खाई थी कि मैं ऐसा कर सकता हूं। ओह ठीक है, संपादित। हाजिर करने के लिए धन्यवाद।

— स्पडली

Answer 11

आपकी सबसे अच्छी शर्त एक ऐसा फंक्शन बनाना हो सकता है जो आपके खुद के स्टाइल सेट करे:

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

ध्यान दें कि आपको अभी भी जावास्क्रिप्ट-संगत संपत्ति नामों का उपयोग करना होगा (इसलिए backgroundColor)

Answer 12

के लिए देखें .. में

उदाहरण:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}

Answer 13

यह पुराना धागा है, इसलिए मुझे लगा कि किसी को भी आधुनिक उत्तर की तलाश है, मैं Object.keys () का उपयोग करने का सुझाव दूंगा;

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);

Answer 14

ऐसे परिदृश्य हैं जहां जावास्क्रिप्ट के साथ जावास्क्रिप्ट का उपयोग करने से इस तरह की समस्या का अधिक अर्थ हो सकता है। निम्नलिखित कोड पर एक नज़र डालें:

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

यह बस CSS कक्षाओं के बीच स्विच करता है और ओवरराइडिंग स्टाइल से संबंधित कई समस्याओं को हल करता है। यहां तक ​​कि यह आपके कोड को अधिक सुव्यवस्थित बनाता है।

Answer 15

आप एक फ़ंक्शन लिख सकते हैं जो किसी भी मौजूदा घोषणाओं को अधिलेखित नहीं करने के लिए व्यक्तिगत रूप से घोषणाओं को सेट करेगा जो आप आपूर्ति नहीं करते हैं। मान लें कि आपके पास घोषणाओं की यह ऑब्जेक्ट पैरामीटर सूची है:

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

आप एक ऐसा कार्य लिख सकते हैं जो इस तरह दिखता है:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

जो उस वस्तु पर लागू करने के लिए शैली घोषणाओं की elementएक objectसंपत्ति सूची लेता है । यहाँ एक उपयोग उदाहरण है:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply
const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});

Answer 16

मुझे लगता है कि उपरोक्त सभी समाधानों के संबंध में यह एक बहुत ही सरल तरीका है:

const elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});

Answer 17

शैलियों ऑब्जेक्ट के CSSStyleDeclaration.setProperty()अंदर विधि का उपयोग करें Object.entries।
हम इसके साथ CSS संपत्ति के लिए प्राथमिकता ("महत्वपूर्ण") भी निर्धारित कर सकते हैं।
हम "हाइपेन-केस" सीएसएस संपत्ति नामों का उपयोग करेंगे।

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

<div id="my_div"> Hello </div>

Answer 18

नीचे इनरएचटीएमएल वैध है

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

Answer 19

ES6 + के साथ आप बैकटिक्स का भी उपयोग कर सकते हैं और यहाँ तक कि सीएसएस को भी कहीं से सीधे कॉपी कर सकते हैं :

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

Answer 20

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

Answer 21

हम शैली फ़ंक्शन को नोड प्रोटोटाइप में जोड़ सकते हैं:

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

फिर, बस किसी भी नोड पर शैलियों की विधि कॉल करें:

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

यह किसी भी अन्य मौजूदा शैलियों को संरक्षित करेगा और ऑब्जेक्ट पैरामीटर में मौजूद मानों को अधिलेखित कर देगा।