আমি কীভাবে জাভাস্ক্রিপ্টে একাধিক সিএসএস শৈলী সেট করতে পারি?

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আপনার উদাহরণে কি হবে ? শুরুতে আপনার কাছে একক ভেরিয়েবলের একটি তালিকা রয়েছে ...

— ফেলিক্স ক্লিং

ফন্ট-আকার: 12 px; বাকি আছে: 200px; শীর্ষ: 100px

— মিরেসিয়া

এটি যদি কাজ করে তবে এটি সেট করতে সমস্ত সিএসএস সমন্বিত একটি স্ট্রিং হবে: ডকুমেন্ট.সেটমেন্টমেন্টবাইআইডি ("মাই এলিমেন্ট") style স্টাইল = ফন্ট-আকার: 12px; বাকি আছে: 200px; শীর্ষ: 100px

— মিরসিয়া

@ মিরসিয়া: আমার উত্তরটি একবার দেখুন ... আপনি ব্যবহার করতে পারেন cssText।

— ফেলিক্স ক্লিং

@ ফেলিক্স ক্লিং এটিই আমি খুঁজছি। প্রচুর পুনঃপ্রবাহ এবং পুনরায় রঙ করা না। এটি আমার কোড দিয়ে কাজ করবে কিনা তা সম্পর্কে আমি নিশ্চিত নই তবে এটি হওয়া উচিত! থ্যাঙ্কস

— মিরসিয়া

Answer 1

আপনার যদি স্ট্রিং হিসাবে সিএসএসের মান থাকে এবং উপাদানটির জন্য ইতিমধ্যে সেট করা অন্য কোনও সিএসএস নেই (বা আপনি ওভাররাইটিংয়ের বিষয়ে চিন্তা করেন না) তবে cssTextসম্পত্তিটি ব্যবহার করুন :

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

এটি একটি অর্থেই ভাল কারণ এটি প্রতিবার কোনও সম্পত্তি পরিবর্তন করার পরে উপাদানটিকে পুনরায় রঙ করা থেকে বিরত করে (আপনি সমস্ত কিছু "একবারে" কোনওভাবে পরিবর্তন করেন)।

অন্যদিকে, আপনাকে প্রথমে স্ট্রিংটি তৈরি করতে হবে।

Comments

document.getElementById ("myElement") lement উপাদানটির জন্য একটি 'নরমালাইজড' মানটি ফিরিয়ে দেবে yle

— কেনেবেক

@ একনেবেক: সবেমাত্র চেষ্টা করে দেখেছেন এবং আপনি ঠিক বলেছেন। আমি এটি জানতাম না, আমি কেবল ভেবেছিলাম এটি ইতিমধ্যে বিদ্যমান পাঠ্যের সাথে সংযুক্ত। তবে এটি প্রকৃতপক্ষে মানগুলি প্রতিস্থাপন করে ...

— ফেলিক্স ক্লিং

আমি আশা করি যে কেউ এটি পেয়েছে এবং এটি ব্যবহার করবে - আমি এটি কখনও নথিভুক্ত দেখিনি। ভাল উত্তর, যাইহোক।

— কেনেবেক

@ একনিবেক আমি জেএসপিআইপি পরীক্ষা করেছি এবং দেখতে পেয়েছি যে সিএসএসটেক্সট পদ্ধতি ব্যবহারের বিপরীতে একাধিক সিএসএস বিধি প্রয়োগ করা আরও দ্রুত: jsperf.com/csstext-vs- বহুগুণ- CSS-rules/4

— আন্দ্রে

@ রোহিতটিগ্গা: একটি স্ট্রিং যাতে সিএসএস বিধি থাকে। যেমন display: block; position: absolute;।

— ফেলিক্স ক্লিং

Answer 2

অবজেক্ট.অ্যাসাইন ব্যবহার করুন :

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

এটি আপনাকে সিএসএস স্টাইল পুনরায় লেখার পরিবর্তে শৈলীর একত্রীকরণের ক্ষমতাও দেয়।

আপনি একটি শর্টকাট ফাংশনও করতে পারেন:

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

Comments

দুর্ভাগ্যক্রমে এই পদ্ধতিটি আইই 11 kangax.github.io/compat-table/es6/…

— অ্যান্ড্রুসিলভার

@ অ্যান্ড্রুসিলবার - নন-সামঞ্জস্যপূর্ণ ব্রাউজারগুলিতে ES6 বৈশিষ্ট্যের জন্য সমর্থন পেতে অনেকগুলি পলিফিল লাইব্রেরির মধ্যে ব্যাবেল এবং& ব্যবহার করুন।

— পেরিটা ব্রেটা

বাবেল ব্যবহার করার সময়, এই সাথে যেতে পদ্ধতি! পারফেক্ট!

— নিরাজুল

@ নীরাজুল এটি কীভাবে ব্যবহার করবেন? আমি চেষ্টা করি 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;");

যত্নবান হন: পরে যদি আপনি শৈলীর বৈশিষ্ট্য যুক্ত করতে বা পরিবর্তন করতে এই পদ্ধতিটি ব্যবহার করেন তবে 'setAttribute' ব্যবহার করে পূর্ববর্তী বৈশিষ্ট্যগুলি মুছে ফেলা হবে।

Comments

removeAttributeযারা setAttributeস্টাইলটি পুনরায় সেট করতে ব্যবহার করার কথা ভাবছেন তাদের কাজে আসবে

— শে-আজেহ

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

আমি কোনও স্টাইল পরিবর্তন করতে চাইলে ওভাররাইড না করার জন্য আমি প্রতিবার স্টাইল সম্পত্তিটি ব্যবহার করছিলাম তবে এটি আরও ভাল, আরও ঘনীভূতভাবে কাজ করে।

— ড্রাগনোর

সেরা সমাধান, কারণ সিএসএসটেক্সটের মতো নমনীয় এবং দরকারী তবে দ্রুত।

— সাইমন স্টেইনবার্গার

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 ব্যবহার করতে পারি না ... থ্যাঙ্কস

— মিরসিয়া

ফন্টসাইজ হিসাবে ফন্টসাইজ লিখতে হবে?

— মাঝখানে

হ্যাঁ. স্ট্রিং নোটেশন ব্যবহার করার পরেও বৈশিষ্ট্যগুলি কেস সংবেদনশীল। এটি হরফ আকার: 12px হওয়া উচিত।

— MyNameIsKo

আমি হরফ আকার বলতে চাই;)

— মিকাস

Answer 6

জাভাস্ক্রিপ্টে একাধিক CSS শৈলীর বৈশিষ্ট্য সেট করুন

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

আমি এই পদ্ধতিটিও খুব বেশি ব্যবহার করি কারণ আপনার যদি অন্যান্য ইনলাইন স্টাইল না থাকে তবে এটি কার্যকর but

— тнытный

যদি সমস্যা দেখা দেয় তবে কেবল খারাপ প্রয়োগের কারণে। এগুলি নির্ভর করে আপনি কীভাবে, কখন এবং কোথায় আপনার কোডটিতে প্রয়োগ করেন।

— থাইলেসিস

Answer 8

আপনার সিএসএস ফাইলগুলিতে স্বতন্ত্র ক্লাস থাকতে পারে এবং তারপরে শ্রেণীর নামটি আপনার উপাদানকে অর্পণ করতে পারেন

অথবা আপনি শৈলীর বৈশিষ্ট্যগুলি হিসাবে লুপ করতে পারেন -

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

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

Comments

এটি কোনও বিকল্প নয় যা ভেরিয়েবলগুলি গতিশীল

— মিরসিয়া

এটি ব্যবহারকারী যা বলেছিল ঠিক তেমন নয়, তবে এটি সম্ভবত সবচেয়ে কার্যকর সমাধান solution +1

— রায়ান কিনাল

@ সাচিন "ফন্ট-সাইজ" কে "ফন্ট সাইজ" হিসাবে উট-কেসড করা দরকার। হাইপনেটেড স্টাইলের নামগুলি ব্রাউজারগুলিতে কাজ করার গ্যারান্টিযুক্ত নয়, যদি না আপনি সেটএট্রিবিউট ব্যবহার করেন।

— আশ্বিন প্রভু

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।

— ফেলিক্স ক্লিং 13

@ ফেলিক্স: cssTextইনলাইন স্টাইলশিট মান সেট করার জন্য ঠিক আছে। তবে আপনি যদি ক্লাসও পেয়ে থাকেন, বা আপনি যদি কিছু মানগুলি ওভাররাইড করতে চান তবে সবগুলিই না, এটি ব্যবহার করা বেশ কঠিন cssText। সুতরাং আপনি ঠিক বলেছেন; আপনি এটি করতে পারেন, তবে আমি বেশিরভাগ ব্যবহারের ক্ষেত্রে এর বিরুদ্ধে সুপারিশ করব।

— স্পুদলি

ভাল ক্লাস থাকা কোন যুক্তি নয় ... obj.topবা obj.style.colorএগুলি ইনলাইন স্টাইলশিট মান সেট করে। এবং হ্যাঁ, আমার উত্তরে আমি বলেছিলাম যে মানগুলি ওভাররাইট করা হবে ... এটি প্রাসঙ্গিকের উপর নির্ভর করে যদি এটি কার্যকর হয় বা না হয়।

— ফেলিক্স ক্লিং

আপনি আরও ভাল এটি তৈরি করুন = ডকুমেন্ট.সেটমেন্ট বিইআইডি ("মাই এলিমেন্ট") স্টাইল; বা আপনার বৈশিষ্ট্যগুলি ob.style.top = শীর্ষে সেট করুন।

— কেনেবেক

@ একনেবেক - হুম, শপথ করতে পারতাম আমি তা করেছিলাম। ওহ ভাল, সম্পাদিত। দাগ দেওয়ার জন্য ধন্যবাদ

— স্পুডলি

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

এটি পুরানো থ্রেড, সুতরাং আমি আধুনিক উত্তর খুঁজছেন এমন কাউকেই খুঁজে পেয়েছি, আমি অবজেক্ট.কিজ () ব্যবহার করার পরামর্শ দেব;

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 + + আপনার কাছে ব্যবহার করতে পারেন ব্যাকটিক এবং এমনকি কোথাও থেকে সরাসরি CSS কপি করুন:

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});

এটি অন্য যে কোনও বিদ্যমান শৈলী সংরক্ষণ করবে এবং অবজেক্ট প্যারামিটারে উপস্থিত মানগুলি ওভাররাইট করবে।