জাভাস্ক্রিপ্ট সহ একটি সিএসএস মান পান

Question

আমি জানি আমি জাভাস্ক্রিপ্টের মাধ্যমে একটি সিএসএস মান সেট করতে পারি যেমন:

document.getElementById('image_1').style.top = '100px';

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

Comments

আপনি কোন 'নির্দিষ্ট স্টাইলের মান' অর্জনের চেষ্টা করছেন?

— ব্রায়ানএইচ

বর্তমান পজিশনিং মান: উচ্চতা, প্রস্থ, শীর্ষ, মার্জিন, ইত্যাদি

— মাইকেল পল

আপনার প্রশ্নটি বিশ্বাস করতে পারে যে আপনি চাইছেন এমন কিছু হতে পারে যা আপনি যা var top = document.getElementById('image_1').style.top; চান তা যদি না হয় তবে তা পুনর্বিবেচনা করতে পারে

— মার্ক

সমস্ত, উভয় পদ্ধতি নিখুঁতভাবে কাজ করে, কেবল আমার যা প্রয়োজন। জ্যাকুরি পদ্ধতিটি আরও কিছুটা কমপ্যাক্ট, সুতরাং আমি সম্ভবত এটি ব্যবহার করব।

— মাইকেল পল

Answer 1

আপনি ব্যবহার করতে পারেন getComputedStyle()।

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFizz ।

Comments

উদাহরণস্বরূপ আপনি যদি

— কোনও ডিভের

একটি সংক্ষিপ্ত বিবরণ বা আপনার ধীর মানে?

— ডেভিড উইনিস্কি

getComputedStyle IE 8 এবং এর নীচে সমর্থিত নয়।

— ডেভিড উইনিস্কি

কিছুটা বন্ধ বিষয়: কিছু (সমস্ত?) শর্টহ্যান্ড সিএসএস বৈশিষ্ট্যগুলি জাভাস্ক্রিপ্টে অ্যাক্সেসযোগ্য নয়। যেমন আপনি প্যাডিং-বাম পেতে পারেন তবে প্যাডিং নয়। জেএসফিডাল

— ডেভিড

@ ডেভিডওয়িনিস্কি আমি সত্যই বিশ্বাস করি না যে ওয়েবদেবরা এখনও আইই 8 কে একটি মূলধারার ব্রাউজার হিসাবে বিবেচনা করবে। বিবেচনা করে এটি আর মাইক্রোসফ্ট দ্বারা সমর্থিত নয়

— কেভিন কুয়েল

Answer 2

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

এটি ক্রস-ব্রাউজারের উপায়ে করা এত সহজ নয়, আইএম এর নিজস্ব নিজস্ব উপায় রয়েছে এলিমেন্ট কোডারেন্ট স্টাইল সম্পত্তি দ্বারা এবং অন্য ব্রাউজারগুলি দ্বারা প্রয়োগ করা ডম লেভেল 2 স্ট্যান্ডার্ড উপায় হ'ল ডকুমেন্ট.ডেফল্টভিউ.জেটকম্পিউটেস্টাইল পদ্ধতি দ্বারা।

দুটি উপায়ের মধ্যে পার্থক্য রয়েছে, উদাহরণস্বরূপ, আই এলিমেন্ট কোডেন্টাল স্টাইল বৈশিষ্ট্যটি আশা করে যে আপনি ক্যামেল কেসে দুটি বা ততোধিক শব্দের সমন্বয়ে সিএসএস সম্পত্তি নামগুলি অ্যাক্সেস করতে পারেন (যেমন ম্যাক্সহাইট, ফন্টসাইজ, ব্যাকগ্রাউন্ড কালার, ইত্যাদি), স্ট্যান্ডার্ড পদ্ধতিতে বৈশিষ্ট্যগুলি প্রত্যাশা করে ড্যাশ দিয়ে পৃথক করা শব্দগুলি (উদাহরণস্বরূপ সর্বাধিক উচ্চতা, ফন্টের আকার, পটভূমির রঙ ইত্যাদি)। ......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
            return (function(value) {
                var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

প্রধান রেফারেন্স স্ট্যাকওভারফ্লো

Answer 3

নিম্নলিখিত ব্যবহার. এটা আমাকে সাহায্য করেছে।

document.getElementById('image_1').offsetTop

স্টাইলগুলি পান দেখুন ।

Answer 4

ডিওএম ম্যানিপুলেশন ছাড়াই সিএসএসের মানগুলি পরীক্ষা করার জন্য ক্রস ব্রাউজার সমাধান:

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

ব্যবহার:

get_style_rule_value('.chart-color', 'backgroundColor')

স্যানিটাইজড সংস্করণ (নির্বাচক ইনপুটকে ছোট হাতের দিকে চাপিয়ে দেয়, এবং নেতৃত্ব না দিয়ে ব্যবহারের ক্ষেত্রে অনুমতি দেয় allows ")

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }

Comments

আমার দীর্ঘ দিন ছিল এবং এটি বেশ কয়েকটি কারণে কাজ করে নি। pastie.org/9754599 অবৈধ নিয়ম তালিকা ছুঁড়ে ফেলে এবং চূড়ান্তের উভয় পক্ষকে কম করে === অনেক ধন্যবাদ আপনার সমাধানটি এখনও দিনটি বাঁচিয়েছে!

— রিচার্ড ফক্স 19

ভাল উত্তর, কয়েক প্রান্ত কেস ব্যবহারের সমস্যাগুলি ঠিক করার জন্য শেষে একটি স্যানিটাইজড সংস্করণ যুক্ত করা হয়েছে।

— unsynchronized

Answer 5

আপনি যদি এটিকে প্রোগ্রামগতভাবে সেট করেন তবে আপনি এটিকে কেবল একটি চলক (যেমন document.getElementById('image_1').style.top) এর মতো কল করতে পারেন call অন্যথায়, আপনি সবসময় jQuery ব্যবহার করতে পারেন:

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>

Comments

আমি মনে করি না আপনার jQuery উদাহরণটি খুব পরিষ্কার (বা সঠিক)।

— অ্যালেক্স

শৈলীর বৈশিষ্ট্য সমস্ত শৈলীর ইনলাইন উপাদানটিতে প্রয়োগ করে, CSS বিধি দ্বারা সংজ্ঞায়িত হয় না।

— স্টিভেন কোচ

Answer 6

আপনি যদি লাইব্রেরিতে থাকেন তবে মাই লাইব্রেরি এবং গেটস্টাইল কেন নয় ।

JQuery CSS পদ্ধতিটি ভুলভাবে বদ্ধ করা হয়েছে, CSS স্টাইল স্থাপনের কেবল একটি উপায় এবং প্রয়োজনীয়তার সাথে কোনও উপাদানটির শৈলীর বৈশিষ্ট্যের প্রকৃত মানগুলি উপস্থাপন করে না।

Answer 7

2020 সালে

ব্যবহারের আগে চেক করুন

আপনি কম্পিউটেড স্টাইলম্যাপ () ব্যবহার করতে পারেন

উত্তরটি বৈধ তবে কখনও কখনও আপনাকে এটি পরীক্ষা করতে হবে এটি কোন ইউনিটটি দেয়, আপনি কোনও slice()বা substring()স্ট্রিং ছাড়াই এটি পেতে পারেন ।

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);

.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}

<div class="jsCSS"></div>

Answer 8

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

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}

Comments

এটি একটি খারাপ ধারণা, যদি না আপনি সত্যই প্রত্যাশা করেন যে নোডটি ডোমে থাকতে পারে না। যখন কোনও নাল প্রত্যাশা করা হয় না তখন অন্ধ নাল চেকগুলি আপনাকে কোনও ত্রুটির উপস্থিতি দিতে পারে তবে সম্ভবত এটি কোনও বাগ লুকিয়ে থাকে h আপনি যদি নোডটি সেখানে থাকার প্রত্যাশা করেন, এটি না থাকার জন্য কোড করবেন না, একটি ত্রুটি ঘটতে দিন যাতে আপনি নিজের কোডটি ঠিক করতে পারেন। এই উত্তরের প্রশ্নের সাথে নিজের কোনও সম্পর্ক নেই এবং যেহেতু এটি একটি (খারাপ) পরামর্শ বেশি, তাই এটি একটি মন্তব্য হওয়া উচিত।

— জুয়ান মেন্ডেস

আপনার মন্তব্যের জন্য ধন্যবাদ. আমি এটি করি কারণ আমি আত্মরক্ষামূলকভাবে বিকাশের ঝোঁক। এখানে প্রশ্ন: আপনি ব্যবহারকারীর মেশিনে ত্রুটিটি কীভাবে দেখবেন? মনে রাখবেন, আপনার মেশিনে আপনার জন্য যা কাজ করে তা অন্যের জন্য কাজ না করে (বিভিন্ন ব্রাউজার এবং ওএস, প্লাগইন যা পৃষ্ঠার আচরণকে প্রভাবিত করে, অন্যান্য বিভিন্ন বিষয়গুলি বন্ধ আছে ইত্যাদি)। মুল বক্তব্যটি হ'ল এটি নিখুঁতভাবে ব্যর্থ হয়েছে সুতরাং পৃষ্ঠাটি ব্যবহারকারীকে একটি অকেজো ত্রুটি পপ করার পরিবর্তে যা কিছু করা হয়েছিল তার কাছাকাছি কিছু করেছে।

— ব্রায়ানএইচ

@ ব্রায়ানহহ একটি ব্রাউজার বাগ রয়েছে যেখানে এটি "ইমেজ_1" এর আইডি দিয়ে কোনও উপাদান সরবরাহ করে না? ;)

— অ্যালেক্স

@ আলেক্স নং যদি সেই আইডি সহ কোনও উপাদান না থাকে তবে ওপির কোডটি ত্রুটিযুক্ত হয়ে ব্যর্থ হবে। উদাহরণ । আমার পরামর্শটি কোডটি ছিল যাতে এটি কখনই না ঘটে।

— ব্রায়ানএইচ

Answer 9

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

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}  

তবে জটিল নির্বাচকদের ক্ষেত্রে এই সহজ অনুসন্ধানটি কাজ করবে না।