জাভাস্ক্রিপ্টে সিএসএস সম্পত্তি সেট করবেন?

160

আমি নিম্নলিখিতটি তৈরি করেছি ...

var menu = document.createElement('select');

আমি এখন সিএসএস বৈশিষ্ট্য যেমন সেট করব width: 100px?

javascript css

— Skizit
সূত্র

251

ব্যবহার element.style:

var element = document.createElement('select');
element.style.width = "100px";

— কেজেওয়াই.নাম 葉家仁
সূত্র

14

বেসরকারীদের মতো -webkit-background-sizeকী হবে? এগুলি সরল js সহ সেট করার কোনও উপায় আছে বা আমাদের jQuery ব্যবহার করতে হবে?

— লুক

60

@ লুক আইজেক্ট.স্টাইল ["- ওয়েবকিট-ব্যাকগ্রাউন্ড-সাইজ"] = "400px"

— ড্যানিয়েল এক্স মুর

এটি আসলে উপাদানটিতে উপাদানকে স্টাইল করে শৈলীশীলে নয়।

— Aft3rL1f3

56

শুধু সেট করুন style:

var menu = document.createElement("select");
menu.style.width = "100px";

অথবা আপনি যদি চান তবে আপনি jQuery ব্যবহার করতে পারেন :

$(menu).css("width", "100px");

— djdd87
সূত্র

5

@ সিম - আমার উক্তিগুলি অসঙ্গত নয়। আমি সবসময় জেএসের জন্য ডাবল উক্তি ব্যবহার করি কারণ এটি কাজের মান। যাইহোক, প্রথম সারির একক উদ্ধৃতি ছিল কারণ আমি ওপিএস প্রশ্নটি থেকে এটি অনুলিপি করেছি। যাইহোক এখনই সংশোধন করা হয়েছে।

— djdd87

1

ঠিক আছে, তারা এখন ঠিক আছে, তবে আমার মন্তব্যের সময় এগুলি বেমানান ছিল:)

— Šime Vidas

2

@ সিম - আমি আকীকন করেছিলাম যে: "যাইহোক, প্রথম লাইনে ওপিএস প্রশ্ন থেকে এটি অনুলিপি করার সাথে সাথে একক উদ্ধৃতি ছিল। যাইহোক এখনই সংশোধন করা হয়েছে।"

— djdd87

35

বেশিরভাগ শৈলীর জন্য এটি করুন:

var obj = document.createElement('select');
obj.style.width= "100px";

নামে হাইফেন রয়েছে এমন স্টাইলগুলির পরিবর্তে এটি করুন:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

— ড্যানিয়েল এক্স মুর
সূত্র

17

ভ্যানিলা জাভাস্ক্রিপ্ট সহ এটি আসলে বেশ সহজ:

menu.style.width = "100px";

— জাস্টিন নিসনার
সূত্র

14

উত্তরগুলির সমস্তগুলি আপনাকে যা বলেছিল তা কীভাবে করতে হবে তা সঠিকভাবে জানায় তবে আমি জাভাস্ক্রিপ্ট ব্যবহার করে এলিমেন্টের উপর একটি শ্রেণি সেট করে সিএসএস ব্যবহার করে এটি স্টাইল করার পরামর্শ দেব। এইভাবে আপনি আচরণ এবং শৈলীর মধ্যে সঠিক বিচ্ছেদ রাখছেন।

ভাবুন আপনি যদি সাইটটিকে নতুন করে স্টাইল করার জন্য ডিজাইনার পেয়ে থাকেন ... আপনার জাভাস্ক্রিপ্ট নিয়ে কাজ না করেই তারা সিএসএসে খাঁটিভাবে কাজ করতে সক্ষম হবে।

প্রোটোটাইপ আমি করব:

$(newElement).addClassName('blah')

— শুভক্ষণ
সূত্র

1

আমার কাছ থেকে +1 - আপনার সমস্ত সিএসএসকে আলাদা রাখতে অনেক সহজ / ক্লিনার।

— আয়ান অক্সলে

1

রেফারেন্সের জন্য এর jQuery সংস্করণ ...$(selector).addClass('blah')

— zgr024

8

2018 সালে একই জিনিস করতে চান এমন লোকদের জন্য

আপনি আপনার উপাদানকে (সিএসএস বা জেএস এর মাধ্যমে) সিএসএস কাস্টম সম্পত্তি অর্পণ করতে এবং এটি পরিবর্তন করতে পারেন:

সিএসএসের মাধ্যমে দায়িত্ব:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

জেএস এর মাধ্যমে নিয়োগ

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

জেএসের মাধ্যমে সম্পত্তি মূল্য পান

ELEMENT.style.getPropertyValue('--element-width');

এখানে দরকারী লিঙ্কগুলি:

— মাতিয়া অ্যাস্টোরিনো
সূত্র

6

ডিবাগ করার সময়, আমি এক লাইনে CSS বৈশিষ্ট্যগুলির একটি গুচ্ছ যুক্ত করতে সক্ষম হতে চাই:

menu.style.cssText = 'width: 100px';

এই শৈলীতে অভ্যস্ত হয়ে আপনি এক লাইনে এমন একগুচ্ছ CSS যুক্ত করতে পারেন:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

— একটি উপকথা
সূত্র

5

আপনি যদি বিশ্বব্যাপী সম্পত্তি যুক্ত করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— Hetdev
সূত্র

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— মহসিন খান
সূত্র

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— মহসিন খান
সূত্র

1

এটি বেশিরভাগ সিএসএস বৈশিষ্ট্যগুলির সাথে ভাল কাজ করে যদি সেগুলিতে কোনও হাইফেন না থাকে।

var element = document.createElement('select');
element.style.width = "100px";

মত তাদের মধ্যে হাইফেন সঙ্গে বৈশিষ্ট্যের জন্য max-width, আপনি রূপান্তর করা উচিত sausage-caseকাছেcamelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

— Daut
সূত্র

0

এটি বোঝার জন্য গুরুত্বপূর্ণ যে কোড বেলো স্টাইলশিটটি পরিবর্তন করে না, পরিবর্তে ডোম পরিবর্তন করে:

document.getElementById("p2").style.color = "blue";

ডিওএম স্টাইলশীট উপাদান বৈশিষ্ট্যের একটি গণিত মান সংরক্ষণ করে এবং যখন আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি উপাদান শৈলীর গতিশীল পরিবর্তন করেন আপনি ডম পরিবর্তন করছেন। এটি লক্ষ করা গুরুত্বপূর্ণ, এবং বুঝতে হবে কারণ আপনি যেভাবে আপনার কোডটি লিখেছেন তা আপনার গতিবেগকে প্রভাবিত করতে পারে। যদি আপনি এমন মানগুলি অর্জন করার চেষ্টা করেন যা সরাসরি উপাদানটিতে লেখা হয় নি, যেমন ...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... আপনি কোডের উদাহরণ হিসাবে 'প্রপার্টিভ্যালু' ভেরিয়েবলের মধ্যে সংরক্ষণ করা হবে এমন একটি অপরিবর্তিত মান ফিরে পাবেন। আপনি যদি সিএসএস স্টাইল শিটের ভিতরে রচিত বৈশিষ্ট্যগুলি অর্জন এবং সেটিংয়ের সাথে কাজ করে থাকেন এবং আপনি এমন একটি একক ফাংশন চান যা সেইসাথে স্টাইল-সম্পত্তি-মান নির্ধারণ করে, যা একটি খুব সাধারণ পরিস্থিতি হতে পারে, তারপরে আপনি JQuery ব্যবহার করতে পারেন।

$(selector).css(property,value)

কেবলমাত্র খারাপ দিকটিই আপনি জিকুয়েরি জানতে পেরেছেন তবে প্রতিটি জাভাস্ক্রিপ্ট বিকাশকারী জিকুয়েরি শিখতে হবে এটি খুব ভাল কারণগুলির মধ্যে এটি একটি। আপনি যদি কোনও সিএসএস সম্পত্তি পেতে চান যা খাঁটি জাভাস্ক্রিপ্টের স্টাইল-শীট থেকে গণনা করা হয়েছিল তবে আপনার ব্যবহারের প্রয়োজন।

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

এই পদ্ধতির ক্ষতিটি হ'ল getComputesValue পদ্ধতিটি কেবল পায়, এটি সেট হয় না। মোজিলার গণ্য মূল্যবোধ গ্রহণ করুন এই লিঙ্কটি আমি এখানে কী সম্বোধন করেছি তা আরও গভীরতর হয়। আশা করি এটি কাউকে সাহায্য করবে !!!

— Aft3rL1f3
সূত্র

আমি মনে করি আপনার প্রথম কোড ব্লকে বিষয়বস্তু অনুপস্থিত?

— zb226

1

সেখানে এটি স্থির হয়েছে

— Aft3rL1f3