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

Question

জাভাস্ক্রিপ্ট সহ ইনলাইন সিএসএস মানগুলি সেট করা সহজ। আমি যদি প্রস্থটি পরিবর্তন করতে চাই এবং আমার কাছে এইচটিএমএল রয়েছে:

<div style="width: 10px"></div>

আমার যা করা দরকার তা হ'ল:

document.getElementById('id').style.width = value;

এটি ইনলাইন স্টাইলশিটের মান পরিবর্তন করবে। সাধারণত এটি কোনও সমস্যা নয় কারণ ইনলাইন স্টাইলটি স্টাইলশীটকে ওভাররাইড করে। উদাহরণ:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

এই জাভাস্ক্রিপ্ট ব্যবহার:

document.getElementById('tId').style.width = "30%";

আমি নিম্নলিখিত পেতে:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId" style="width: 30%";></div>

এটি একটি সমস্যা, কারণ আমি কেবল ইনলাইন মানগুলি পরিবর্তন করতে চাই না, যদি আমি প্রস্থটি সেট করার আগে আমি অনুসন্ধান করি তবে আমার যখন রয়েছে:

<div id="tId"></div>

প্রত্যাবর্তিত মানটি নুল, সুতরাং যদি আমার কাছে জাভাস্ক্রিপ্ট থাকে যা কিছু যুক্তি করার জন্য কিছু প্রস্থ জানতে হবে (আমি প্রস্থটি 1% দ্বারা বাড়িয়েছি, একটি নির্দিষ্ট মান নয়), যখন আমি স্ট্রিংটি আশা করি তখন নুল ফিরে আসি "50% "সত্যিই কাজ করে না।

সুতরাং আমার প্রশ্ন: আমার সিএসএস শৈলীতে মান রয়েছে যা ইনলাইনটিতে নেই, আমি কীভাবে এই মানগুলি পেতে পারি? কোনও আইডি দেওয়াতে আমি কীভাবে ইনলাইন মানগুলির পরিবর্তে স্টাইলটি সংশোধন করতে পারি?

Comments

আপনি কি আপনার পোস্ট সম্পাদনা করতে পারেন? শুরুতে কিছু অসম্পূর্ণ বাক্য রয়েছে, আপনি কী খুঁজছেন তা নিশ্চিত নয় ...

— জেসন এস

আপনি যা জিজ্ঞাসা করছেন তা সম্পর্কে আমি এখনও কিছুটা বিভ্রান্ত। আপনি কি 1) কে সিএসএস নিজেই পরিবর্তন করতে বলছেন যা একবারে সমস্ত উপাদানকে বদলে দেবে? বা 2) একবারে কোনও আইটেমের জন্য সিএসএস পরিবর্তন করতে?

— মাইক

আমি আসল প্রশ্ন হিসাবে বিভ্রান্ত করছি। কোনও অবজেক্টের বর্তমান স্টাইলটি অগত্যা ট্যাগের 'স্টাইল' বৈশিষ্ট্যের সাথে একই রকম হয় না।

— ম্যাটজে

দুঃখিত আমি এটি আরও পরিষ্কার হতে সম্পাদনা করব। আমি ইনলাইন সিএসএস সেট করতে চাই না। আমি শৈলীর প্রস্থ বাড়াতে / হ্রাস করতে সক্ষম হতে চাই। আমি যা খুঁজছি তার একটি পূর্ণ উদাহরণ দিয়ে আমি সম্পাদনা করব।

— কল্টিন

কোডপেনের উত্তর কোডেপেন.আইও

— নিক মিচেল

Answer 1

ঠিক আছে, মনে হচ্ছে আপনি গ্লোবাল সিএসএস পরিবর্তন করতে চান যাতে কার্যকরভাবে পেটিকুলার শৈলীর সমস্ত উপাদান একবারে বদলে যাবে। আমি সম্প্রতি শন ওলসন টিউটোরিয়াল থেকে কীভাবে এটি করব তা শিখেছি । আপনি সরাসরি তার কোড এখানে উল্লেখ করতে পারেন ।

এখানে সংক্ষিপ্তসার:

এর মাধ্যমে আপনি স্টাইলশিটগুলি পুনরুদ্ধার করতে পারেন document.styleSheets। এটি আসলে আপনার পৃষ্ঠার সমস্ত স্টাইলশিটের একটি অ্যারে ফিরিয়ে দেবে, তবে আপনি document.styleSheets[styleIndex].hrefসম্পত্তিটির মাধ্যমে কোনটি আছেন তা বলতে পারবেন । আপনি সম্পাদনা করতে চান স্টাইলশিটটি একবার পেয়ে গেলে, আপনাকে নিয়মের অ্যারে নেওয়া দরকার। একে আইই এর "বিধি" এবং বেশিরভাগ অন্যান্য ব্রাউজারে "সিএসএসআরুলস" বলা হয়। আপনি কী সিএসএসআরুল চালু আছেন তা বলার উপায় selectorTextসম্পত্তি দ্বারা । কাজের কোডটি এরকম কিছু দেখাচ্ছে:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

এটি আপনার জন্য কীভাবে কাজ করে তা আমাকে জানান, এবং যদি আপনি কোনও ত্রুটি দেখতে পান তবে মন্তব্য করুন।

Comments

আপনার যদি 100s + উপাদান থাকে তবে এইভাবে সিএসএস পরিবর্তন করা আরও দ্রুত। উদাহরণস্বরূপ বলুন, একবারে টেবিলের একটি নির্দিষ্ট অংশে সমস্ত ঘর পরিবর্তন করা।

— এডিএইচ

আমি rule.valueএফএফ 20 এ খুঁজে পাচ্ছি না। rule.styleতবে যা আছে সেটি স্থায়ী এবং এর মতো আচরণ করে element.style। Cf. https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule । rule.type == rule.STYLE_RULEঅ্যাক্সেস করার আগে চেক করাও ভাল ধারণা হতে পারে rule.selectorText।

— খ্রিস্টান আইচিংগার

সেটি অসাধারণ ছিল! আমি ইমেজ ট্রানজিশনে কাজ করছি, এবং আপনি কাটা জন্য 36 টি পৃথক ইউআরআইতে একটি বড় চিত্র স্থাপন করা শুরু করার সময় CSS সত্যিই ধীর হয়ে যায়। এটি আমার স্ক্রিপ্টটি থেকে এক টন ওভারহেড নিয়েছে। ধন্যবাদ!

— জেসন ম্যাগগার্ড

— ২০১

document.styleSheets[styleIndex].cssRules.[ruleIndex].style = {'color':'red', 'background-color':'green'};আমার জন্য কাজ, ধন্যবাদ!

— পাভেল

Answer 2

অনুগ্রহ! শুধু ডাব্লু 3 জিজ্ঞাসা করুন ( http://www.quirksmode.org/dom/w3c_css.html )! বা আসলে, আমার কাছে পাঁচ ঘন্টা সময় লেগেছে ... তবে এটি এখানে!

function css(selector, property, value) {
    for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles
        //Try add rule
        try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);
        } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE
    }
}

ফাংশনটি ব্যবহার করা সত্যিই সহজ .. উদাহরণস্বরূপ:

<div id="box" class="boxes" onclick="css('#box', 'color', 'red')">Click Me!</div>
Or:
<div class="boxes" onmouseover="css('.boxes', 'color', 'green')">Mouseover Me!</div>
Or:
<div class="boxes" onclick="css('body', 'border', '1px solid #3cc')">Click Me!</div>

উহু..

---

সম্পাদনা: @ ব্যবহারকারী21820 এর উত্তরে বর্ণিত হিসাবে, পৃষ্ঠায় সমস্ত স্টাইলশিট পরিবর্তন করা কিছুটা অপ্রয়োজনীয় হতে পারে। নিম্নলিখিত স্ক্রিপ্ট IE5.5 পাশাপাশি সর্বশেষতম গুগল ক্রোমের সাথে কাজ করে এবং কেবলমাত্র উপরে বর্ণিত সিএসএস () ফাংশন যুক্ত করে।

(function (scope) {
    // Create a new stylesheet in the bottom
    // of <head>, where the css rules will go
    var style = document.createElement('style');
    document.head.appendChild(style);
    var stylesheet = style.sheet;
    scope.css = function (selector, property, value) {
        // Append the rule (Major browsers)
        try { stylesheet.insertRule(selector+' {'+property+':'+value+'}', stylesheet.cssRules.length);
        } catch(err) {try { stylesheet.addRule(selector, property+':'+value); // (pre IE9)
        } catch(err) {console.log("Couldn't add style");}} // (alien browsers)
    }
})(window);

Comments

গুরুতরভাবে সহজ বাস্তবায়ন। ধন্যবাদ

— কালেব অ্যান্ডারসন

আমার উত্তরের মত সদ্য তৈরি হওয়া একটির বিপরীতে প্রতি একক স্টাইলশীট সংশোধন করার কোনও কারণ আছে কি?

— ব্যবহারকারী 21820

খুব সুন্দর বাস্তবায়ন। স্যার আপনাকে কুডোস।

— জেসন ম্যাগগার্ড 3:25

@ ব্যবহারকারী21820, সম্ভবত না। আমার ধারণা আমি সত্যিই নিরাপদ পাশে থাকতে চেয়েছিলাম .. উত্তর অবশেষে আপডেট হয়েছে, আপনাকে ধন্যবাদ :)

— লিওনার্ড পাওলি

Answer 3

উত্তরে কোড জড়ো করে, আমি এই ফাংশনটি লিখেছি যা আমার এফএফ 25 এ ভাল চলছে বলে মনে হচ্ছে।

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  /* returns the value of the element style of the rule in the stylesheet
  *  If no value is given, reads the value
  *  If value is given, the value is changed and returned
  *  If '' (empty string) is given, erases the value.
  *  The browser will apply the default one
  *
  * string stylesheet: part of the .css name to be recognized, e.g. 'default'
  * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
  * string style: camelCase element style, e.g. 'fontSize'
  * string value optionnal : the new value
  */
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}

এটি CSS এর মধ্যে মানগুলি রাখার একটি উপায় যা ব্রাউজার দ্বারা না বুঝলেও জেএসে ব্যবহৃত হবে। উদাহরণস্বরূপ স্ক্রোলযুক্ত টেবিলের মধ্যে একজনের জন্য সর্বোচ্চ হাইট।

কল করুন:

CCSStylesheetRuleStyle('default', "#mydiv", "height");

CCSStylesheetRuleStyle('default', "#mydiv", "color", "#EEE");

Comments

শৈলীটি যদি HTML পৃষ্ঠায় এম্বেড করা থাকে তবে document.styleSheets[m].hrefতা শূন্য হবে এবং ব্যর্থ হবে।

— জিসিএম

Answer 4

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

style=document.createElement('style');
document.head.appendChild(style);
stylesheet=style.sheet;
function css(selector,property,value)
{
    try{ stylesheet.insertRule(selector+' {'+property+':'+value+'}',stylesheet.cssRules.length); }
    catch(err){}
}

নোট করুন যে আমরা সম্পত্তির মানটিতে "! গুরুত্বপূর্ণ" যুক্ত করে সরাসরি উপাদানগুলিতে সেট করা ইনলাইন স্টাইলগুলি ওভাররাইড করতে পারি, যদি না সেই সম্পত্তিটির জন্য ইতিমধ্যে আরও নির্দিষ্ট "! গুরুত্বপূর্ণ" স্টাইলের ঘোষণা উপস্থিত থাকে।

Comments

আরও জটিল সংস্করণের জন্য বিকাশকারী.মোজিলা.আর.এন.এন- ইউএস / ডকস / ওয়েব / এপিআই / সিএসএস স্টাইলশীট / দেখুন দেখুন ।

— ব্যবহারকারী 21820

খুবই সত্য. .InsertRule ব্যর্থ হলে (প্রাক IE9 সমর্থনের জন্য) .addRule (নির্বাচক, সম্পত্তি + ':' + মান) ব্যবহার করতে ভুলবেন না।

— লিওনার্ড পাওলি

Answer 5

আমার মন্তব্য করার মতো যথেষ্ট উত্তর নেই তাই আমি একটি উত্তর ফর্ম্যাট করব, তবুও এটি কেবল ইস্যুতে ইস্যুটির একটি প্রদর্শনী ration

দেখে মনে হচ্ছে, যখন উপাদান শৈলীগুলি স্টাইলশিটে সংজ্ঞায়িত করা হয় তারা getElementById ("কিছু উপাদান") এ দৃশ্যমান হয় না style

এই কোডটি সমস্যাটি চিত্রিত করে ... নীচে থেকে কোডটি jsFizz এ ।

টেস্ট 2-এ, প্রথম কলে, আইটেমগুলির বাম মানটি অপরিজ্ঞাত হয়, এবং তাই, একটি সাধারণ টগল কী হওয়া উচিত তা নষ্ট হয়ে যায়। আমার ব্যবহারের জন্য আমি আমার গুরুত্বপূর্ণ শৈলীর মানগুলি ইনলাইন সংজ্ঞায়িত করব, তবে এটি স্টাইলশীটের উদ্দেশ্যটিকে আংশিকভাবে পরাজিত বলে মনে হচ্ছে।

এখানে পৃষ্ঠা কোডটি ...

<html>
  <head>
    <style type="text/css">
      #test2a{
        position: absolute;
        left: 0px;
        width: 50px;
        height: 50px;
        background-color: green;
        border: 4px solid black;
      }
      #test2b{
        position: absolute;
        left: 55px;
        width: 50px;
        height: 50px;
        background-color: yellow;
        margin: 4px;
      }
    </style>
  </head>
  <body>

  <!-- test1 -->
    Swap left positions function with styles defined inline.
    <a href="javascript:test1();">Test 1</a><br>
    <div class="container">
      <div id="test1a" style="position: absolute;left: 0px;width: 50px; height: 50px;background-color: green;border: 4px solid black;"></div>
      <div id="test1b" style="position: absolute;left: 55px;width: 50px; height: 50px;background-color: yellow;margin: 4px;"></div>
    </div>
    <script type="text/javascript">
     function test1(){
       var a = document.getElementById("test1a");
       var b = document.getElementById("test1b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 1 -->

  <!-- test2 -->
    <div id="moveDownThePage" style="position: relative;top: 70px;">
    Identical function with styles defined in stylesheet.
    <a href="javascript:test2();">Test 2</a><br>
    <div class="container">
      <div id="test2a"></div>
      <div id="test2b"></div>
    </div>
    </div>
    <script type="text/javascript">
     function test2(){
       var a = document.getElementById("test2a");
       var b = document.getElementById("test2b");
       alert(a.style.left + " - " + b.style.left);
       a.style.left = (a.style.left == "0px")? "55px" : "0px";
       b.style.left = (b.style.left == "0px")? "55px" : "0px";
     }
    </script>
  <!-- end test 2 -->

  </body>
</html>

আমি আশা করি এটি সমস্যাটি আলোকিত করতে সহায়তা করে।

এড়িয়ে

Answer 6

আপনি যে কোনও উপাদানটির "গণিত" শৈলী পেতে পারেন।

আইই "কারেন্টস্টাইল" নামে কিছু ব্যবহার করে, ফায়ারফক্স (এবং আমি অন্যান্য "স্ট্যান্ডার্ড কমপ্লায়েন্ট" ব্রাউজারগুলি ধরে নিই) "ডিফল্টভিউ.জিটকম্পিউটেড স্টাইল" ব্যবহার করে।

এটি করার জন্য আপনাকে ক্রস ব্রাউজারের ফাংশন লিখতে হবে, বা প্রোটোটাইপ বা jQuery এর মতো একটি ভাল জাভাস্ক্রিপ্ট কাঠামো ব্যবহার করতে হবে (প্রোটোটাইপ জাভাস্ক্রিপ্ট ফাইলে "getStyle" এবং jquery জাভাস্ক্রিপ্ট ফাইলে "curCss" অনুসন্ধান করুন)।

এটি বলেছে যে আপনার যদি উচ্চতা বা প্রস্থের প্রয়োজন হয় তবে আপনার সম্ভবত এলিমেন্ট.অফসেটহাইট এবং এলিমেন্ট.অফসেটউইথ ব্যবহার করা উচিত।

প্রত্যাবর্তিত মানটি নুল, সুতরাং যদি আমার কাছে জাভাস্ক্রিপ্ট থাকে যা কিছু যুক্তি করার জন্য কোনও কিছুর প্রস্থ জানতে হবে (আমি প্রস্থটি 1% দ্বারা বাড়িয়েছি, একটি নির্দিষ্ট মান নয়)

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

<div style="width:50%">....</div>

Answer 7

এই সরল 32 লাইন সংক্ষেপে আপনাকে প্রদত্ত স্টাইলশিট শনাক্ত করতে এবং খুব সহজেই এর স্টাইলগুলি পরিবর্তন করতে দেয়:

var styleSheet = StyleChanger("my_custom_identifier");
styleSheet.change("darkolivegreen", "blue");

Answer 8

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

আপনি যদি কোনও উপাদানটির প্রস্থ এবং উচ্চতা অর্জন করতে চান তবে মাত্রাটি কোথা থেকে প্রয়োগ করা হচ্ছে তা নির্ধারণ না করে, কেবল ব্যবহার করুন element.offsetWidthএবং element.offsetHeight।

Comments

আমার ব্যবহার: <স্টাইল> # টিড {প্রস্থ: 10%; } </style> <div id = 'tid' onclick = "বৃদ্ধি ('tid')"> </div> প্রস্থটি <100% হয় কিনা তা পরীক্ষা করে দেখবে, যদি তাই হয় তবে এটি 1% বৃদ্ধি পাবে। document.getElementById.style.width নালাগুলি প্রত্যাবর্তন করে কারণ কোনও ইনলাইন মান নেই। ডিওএম স্টাইলশিটগুলির চেয়ে আরও সহজ কোনও উপায় আছে কি?

— কল্টিন

Answer 9

সম্ভবত এটি চেষ্টা করুন:

function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
  var CCSstyle = undefined, rules;
  for(var m in document.styleSheets){
    if(document.styleSheets[m].href.indexOf(stylesheet) != -1){
     rules = document.styleSheets[m][document.all ? 'rules' : 'cssRules'];
     for(var n in rules){
       if(rules[n].selectorText == selectorText){
         CCSstyle = rules[n].style;
         break;
       }
     }
     break;
    }
  }
  if(value == undefined)
    return CCSstyle[style]
  else
    return CCSstyle[style] = value
}