জাভাস্ক্রিপ্ট ব্যবহার করে পরিবর্তনশীল উপাদান শৈলীর গুণাবলী

Question

আমি একটি ডিভ জন্য একটি নির্দিষ্ট স্টাইল শীট। এখন আমি জেএস ব্যবহার করে ডিভের একটি বৈশিষ্ট্যকে পরিবর্তনশীল করতে চাই।

আমি এটা কিভাবে করবো?

document.getElementById("xyz").style.padding-top = "10px";

এটা কি সঠিক?

Answer 1

এটা প্রায় সঠিক।

যেহেতু এটি -একটি জাভাস্ক্রিপ্ট অপারেটর, তাই আপনার সম্পত্তির নামটিতে এটি সত্যিই থাকতে পারে না। যদি আপনি সেট করে থাকেন borderবা এর পরিবর্তে এমন একক শব্দযুক্ত কিছু আপনার কোডটি ঠিক ঠিক কাজ করবে।

যাইহোক, আপনার যে জিনিসটি padding-topএবং কোনও হাইফেনেটেড বৈশিষ্ট্য নামের জন্য মনে রাখা দরকার তা এটি জাভাস্ক্রিপ্টে আপনি হাইফেনটি সরিয়ে ফেলবেন এবং পরবর্তী অক্ষরটি বড় হাতের অক্ষরে তৈরি করুন, আপনার ক্ষেত্রে এটি হবে paddingTop।

আরও কিছু ব্যতিক্রম রয়েছে। জাভাস্ক্রিপ্টে কিছু সংরক্ষিত শব্দ রয়েছে, সুতরাং আপনি floatযেমন সেট করতে পারবেন না , উদাহরণস্বরূপ। পরিবর্তে, কিছু ব্রাউজারে আপনাকে cssFloatএবং অন্যগুলিতে ব্যবহার করা দরকার styleFloat। এটি এর মতো তাত্পর্যপূর্ণ হওয়ার জন্য এটি প্রস্তাবিত হয় যে আপনি jQuery এর মতো একটি কাঠামো ব্যবহার করুন যা ব্রাউজারের অসঙ্গতিগুলি পরিচালনা করে ...

Answer 2

অন্যান্য উত্তরের পাশাপাশি, আপনি যদি স্টাইল বৈশিষ্ট্যের জন্য ড্যাশ সূচনাটি ব্যবহার করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

document.getElementById("xyz").style["padding-top"] = "10px";

Comments

আমি না, এটি গতিশীল ফাংশনগুলির জন্য সত্যই কার্যকর, কেউ স্ট্রিংকে স্ট্রিংয়ের মান হিসাবে পাস করতে পারে, তারপরে স্টাইল এবং মান সেট করে। দুর্দান্ত সমাধান।

— রাফি

এছাড়াও, @ রাফি যা বলে তাতে যুক্ত করে আপনিও এটি ব্যবহার করতে পারেন document.getElementById("xyz").style["paddingTop"] = '10px'।

— টুথব্রাশ

@ আনুঙ্কজান: ঠিক বলেছেন। আমি বলব এফএফ এ আর কাজ করে না । যা ভাল, আজব ...

— KooiInc

Answer 3

আমি একই সমস্যাটি এর সাথে সমাধান করি:

document.getElementById("xyz").style.padding = "10px 0 0 0";

আশা করি এইটি কাজ করবে.

Comments

এইভাবে করার কনটি হ'ল আপনি অন্য পক্ষের জন্য প্যাডিং সেট করেছেন 0। এবং কখনও কখনও আপনি এটি চান না।

— গুস্তাভো স্ট্রুব

Answer 4

রয়েছে style.setPropertyফাংশন:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Answer 5

ধরে নিচ্ছি আপনার এইচটিএমএল রয়েছে:

<div id='thediv'></div>

আপনি যদি এই ডিভের শৈলীর বৈশিষ্ট্যটি পরিবর্তন করতে চান তবে আপনি ব্যবহার করবেন

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

[ATTRIBUTE]আপনার পছন্দ মতো স্টাইলের বৈশিষ্ট্যটি প্রতিস্থাপন করুন । '-' মুছে ফেলতে এবং নীচের অক্ষরটি বড় হাতের অক্ষরে রাখুন Remember

উদাহরণ

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

Comments

গৃহীত উত্তরে বর্ণিত হিসাবে কিছু ব্যতিক্রম রয়েছে are লাইক float।

— গুস্তাভো স্ট্রুব 21'17

Answer 6

document.getElementById("xyz").style.padding-top = '10px';

হবে

document.getElementById("xyz").style["paddingTop"] = '10px';

Answer 7

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

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

আরও ভাল আপনি স্টাইলগুলি কোনও চলকতে সঞ্চয় করতে পারেন যা সম্পত্তি পরিচালনার পক্ষে আরও সহজ করে তোলে

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

আশা করি এইটি কাজ করবে

Answer 8

অবাক করে দিয়েছি যে আমি নীচের কোয়েরি নির্বাচক উপায় সমাধানটি দেখতে পাইনি ,

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration সমাধান, গৃহীত উত্তরের একটি উদাহরণ

document.getElementById('xyz').style.paddingTop = "10px";

Answer 9

document.getElementById("xyz").setAttribute('style','padding-top:10px');

কাজ করতে হবে।

Comments

এইভাবে করার ক্ষয়ক্ষতিটি হ'ল আপনি অন্য কোনও ইনলাইন স্টাইল সরিয়ে ফেলছেন। এর কারণ আপনি পুরো বৈশিষ্ট্যটির মান প্রতিস্থাপন করছেন। আমার ধারণা বর্তমানের স্টাইলটি পাওয়া, আপনি যে সম্পত্তিটি সেট করতে চান তার বিদ্যমান বিদ্যমান মূল্য পরীক্ষা করা এবং তার পরে পছন্দসই মানটি যুক্ত / প্রতিস্থাপন করা আরও ভাল সমাধান।

— গুস্তাভো স্ট্রুব

একমত। তিনি ইতিমধ্যে কী করছেন যা আপনার ব্যবহারের ক্ষেত্রে বিবেচনায় নিচ্ছে না তার ওপি'র কাছে একটি সমাধানের প্রয়োজন ছিল। এটি অর্জনের সহজ উপায়গুলির মধ্যে এটি একটি, তবে এটি অবশ্যই সেরা নয়।

— পিংকেশ বাদজতিয়া

@ গুস্তাভোস্প্রয়েব, আমি এটিকে কোনও খারাপ দিক বলব না। অনেক ক্ষেত্রে বিকাশকারী ঠিক এটিই করতে চান - যেমন উপাদানটির স্টাইলটি ওভাররাইট করে। আমি এটিকে এটি করার ফলাফল হিসাবে বলব call

— stwr667

Answer 10

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

আমার জন্য কাজ কর