รับค่า CSS ด้วย JavaScript

201

ฉันรู้ว่าฉันสามารถตั้งค่า CSS ผ่าน JavaScript เช่น:

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

แต่ฉันสามารถรับค่าสไตล์เฉพาะปัจจุบันได้หรือไม่ ฉันอ่านที่ฉันสามารถใช้สไตล์ทั้งหมดให้องค์ประกอบได้ แต่ฉันไม่ต้องการแยกสตริงทั้งหมดถ้าไม่จำเป็น

javascript css

— ไมเคิลพอล
แหล่งที่มา

คุณกำลังพยายามที่จะได้รับ 'รูปแบบที่เฉพาะเจาะจง'?

— BryanH

ค่าการวางตำแหน่งปัจจุบัน: ความสูงความกว้างด้านบนขอบ ฯลฯ

— Michael Paul

2

คำถามของคุณยืมไปเชื่อว่าคุณต้องการอะไรเช่นvar top = document.getElementById('image_1').style.top; อาจต้องการที่จะใช้ถ้อยคำถ้านั่นไม่ใช่สิ่งที่คุณต้องการ

— มาร์ค

ขอบคุณทั้งหมดวิธีทั้งสองทำงานได้อย่างสมบูรณ์แบบตามที่ฉันต้องการ วิธีการของ Jquery นั้นเล็กกว่านี้เล็กน้อยดังนั้นฉันอาจจะใช้มัน

— Michael Paul

360

getComputedStyle()คุณสามารถใช้

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

jsFiddle

— อเล็กซ์
แหล่งที่มา

10

หากคุณต้องการเปลี่ยนสีพื้นหลังของ div เช่นระวัง

— อย่า

4

เป็นคำย่อหรือคุณหมายถึงช้า?

— David Winiecki

3

getComputedStyle ไม่รองรับ IE 8 และต่ำกว่า

— David Winiecki

6

ค่อนข้างปิดหัวข้อ: คุณสมบัติ shorthand cssบางส่วน (ทั้งหมด) ไม่สามารถเข้าถึงได้ใน JavaScript เช่นคุณสามารถรับ padding-left แต่ไม่ใช่ padding JSFiddle

— David Winiecki

4

@DavidWiniecki ฉันไม่เชื่อจริงๆว่า webdevs ควรพิจารณา IE8 เป็นเบราว์เซอร์หลัก การพิจารณาว่ามันไม่ได้รับการสนับสนุนจาก

— ไมโครซอฟต์

23

คุณสมบัติ element.style ช่วยให้คุณทราบเฉพาะคุณสมบัติ CSS ที่กำหนดเป็นแบบอินไลน์ในองค์ประกอบนั้น (โดยทางโปรแกรมหรือกำหนดไว้ในแอตทริบิวต์สไตล์ขององค์ประกอบ) คุณควรจะได้รับรูปแบบการคำนวณ

ไม่ใช่เรื่องง่ายที่จะทำในลักษณะข้ามเบราว์เซอร์ IE มีวิธีของตัวเองผ่านคุณสมบัติ element.currentStyle และวิธีมาตรฐาน DOM ระดับ 2 ที่ใช้งานโดยเบราว์เซอร์อื่น ๆ นั้นใช้วิธีการ document.defaultView.getComputedStyle

สองวิธีมีความแตกต่างเช่นคุณสมบัติ IE element.currentStyle คาดหวังว่าคุณเข้าถึงชื่อคุณสมบัติ CSS ที่ประกอบด้วยคำสองคำหรือมากกว่าใน camelCase (เช่น maxHeight, fontSize, backgroundColor ฯลฯ ) วิธีมาตรฐานคาดหวังคุณสมบัติด้วย คำที่คั่นด้วยเครื่องหมายขีดกลาง (เช่นความสูงสูงสุดขนาดตัวอักษรสีพื้นหลัง ฯลฯ ) ......

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

อ้างอิงหลัก stackoverflow

— Amir Movahedi
แหล่งที่มา

21

ใช้สิ่งต่อไปนี้ มันช่วยฉัน

document.getElementById('image_1').offsetTop

ดูยังได้รับรูปแบบ

— user843938
แหล่งที่มา

16

โซลูชันข้ามเบราว์เซอร์เพื่อตรวจสอบค่า CSS โดยไม่ต้องใช้ DOM:

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')

รุ่นที่ผ่านการฆ่าเชื้อ (บังคับให้อินพุตตัวเลือกเป็นตัวพิมพ์เล็กและอนุญาตให้ใช้เคสโดยไม่นำหน้า ".")

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

— karolf
แหล่งที่มา

ฉันมีวันที่ยาวนานและสิ่งนี้ไม่ได้ทำงานด้วยเหตุผลหลายประการ pastie.org/9754599ทำงานได้ดีขึ้นมากโดยการทิ้งรายชื่อกฎที่ไม่ถูกต้องและลดทั้งสองด้านของ === สุดท้าย ขอบคุณมากวิธีการแก้ปัญหาของคุณยังคงบันทึกวัน!

— Richard Fox

คำตอบที่ดีเพิ่มรุ่นที่ถูกสุขลักษณะในตอนท้ายเพื่อแก้ไขปัญหาการใช้งานเคส

— ไนซ์

7

หากคุณตั้งค่าโดยทางโปรแกรมคุณสามารถเรียกมันว่าตัวแปร (เช่นdocument.getElementById('image_1').style.top) มิฉะนั้นคุณสามารถใช้ 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>

— adotout
แหล่งที่มา

7

ฉันไม่คิดว่าตัวอย่าง jQuery ของคุณชัดเจนมาก (หรือถูกต้อง)

— alex

คุณสมบัติสไตล์ส่งคืนสไตล์อินไลน์ทั้งหมดนำไปใช้กับองค์ประกอบไม่ได้กำหนดโดยกฎ CSS

— Steven Koch

3

ในปี 2020

ตรวจสอบก่อนการใช้งาน

คุณสามารถใช้computedStyleMap ()

คำตอบคือถูกต้อง แต่บางครั้งคุณจำเป็นต้องตรวจสอบสิ่งที่หน่วยจะส่งกลับคุณจะได้รับโดยไม่ต้องใด ๆ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>

ขยายตัวอย่างข้อมูล

— Nisharg Shah
แหล่งที่มา

2

หากคุณเข้าสู่ห้องสมุดทำไมไม่ใช้MyLibraryและgetStyle getStyle

วิธี jQuery cssนั้นมีการใช้ชื่อผิด CSS เป็นเพียงวิธีหนึ่งในการตั้งค่ารูปแบบและไม่จำเป็นต้องแสดงถึงค่าจริงของคุณสมบัติสไตล์ขององค์ประกอบ

— RobG
แหล่งที่มา

1

ในเรื่องของความปลอดภัยคุณอาจต้องการตรวจสอบองค์ประกอบที่มีอยู่ก่อนที่คุณจะพยายามอ่านจากมัน หากไม่มีอยู่รหัสของคุณจะมีข้อยกเว้นซึ่งจะหยุดการทำงานในส่วนที่เหลือของ JavaScript ของคุณและอาจแสดงข้อความแสดงข้อผิดพลาดแก่ผู้ใช้ - ไม่ดี คุณต้องการที่จะสามารถล้มเหลวได้อย่างสง่างาม

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
}

— BryanH
แหล่งที่มา

5

นั่นเป็นความคิดที่ไม่ดีเว้นแต่คุณคาดหวังจริงๆว่าโหนดนั้นอาจไม่อยู่ใน DOM Blind null ตรวจสอบเมื่อไม่คาดว่า null จะทำให้คุณดูเหมือนไม่มีข้อผิดพลาด แต่มีโอกาสซ่อนบั๊กมากกว่า หากคุณคาดหวังว่าโหนดจะอยู่ที่นั่นอย่าเขียนรหัสเพื่อให้โหนดนั้นอยู่ที่นั่นให้เกิดข้อผิดพลาดเพื่อให้คุณสามารถแก้ไขรหัสของคุณได้ คำตอบนี้ไม่มีส่วนเกี่ยวข้องกับคำถามและเนื่องจากเป็นคำแนะนำ (ไม่ดี) มากกว่าจึงควรมีความคิดเห็น

— Juan Mendes

2

ขอบคุณสำหรับความคิดเห็นของคุณ ฉันทำอย่างนั้นเพราะฉันมักจะพัฒนาป้องกัน นี่คือคำถาม: คุณจะเห็นข้อผิดพลาดในเครื่องของผู้ใช้ได้อย่างไร? โปรดจำไว้ว่าสิ่งใดที่เหมาะกับคุณในเครื่องของคุณอาจไม่สามารถทำงานกับผู้อื่นได้ (เบราว์เซอร์ & ระบบปฏิบัติการที่แตกต่างกัน, ปลั๊กอินที่ส่งผลต่อพฤติกรรมของหน้าเว็บ, ปิดสิ่งอื่น ๆ อีกมากมาย) จุดคือการทำให้มันล้มเหลวอย่างสง่างามดังนั้นหน้ายังคงทำบางสิ่งบางอย่างใกล้เคียงกับสิ่งที่ตั้งใจแทนที่จะ popping up ข้อผิดพลาดที่ไร้ประโยชน์ให้กับผู้ใช้

— BryanH

@BryanH มีข้อผิดพลาดเบราว์เซอร์ที่ไม่แสดงองค์ประกอบที่มีรหัสของ "image_1" หรือไม่? ;)

— alex

@alex ไม่หากไม่มีองค์ประกอบที่มีรหัสนั้นรหัสของ OP จะล้มเหลวพร้อมข้อผิดพลาด ตัวอย่าง ข้อเสนอแนะของฉันคือการเขียนโค้ดดังนั้นจึงไม่เคยเกิดขึ้น

— ไบรอันเอช

0

โซลูชันข้ามเบราว์เซอร์ที่ไม่มีการจัดการ DOM ที่ระบุไว้ด้านบนไม่ทำงานเนื่องจากให้กฎการจับคู่ครั้งแรกไม่ใช่ครั้งสุดท้าย กฎการจับคู่ล่าสุดคือกฎที่ใช้ นี่คือเวอร์ชั่นที่ใช้งานได้:

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

อย่างไรก็ตามการค้นหาแบบง่ายนี้จะไม่ทำงานในกรณีที่มีตัวเลือกที่ซับซ้อน

— jcdufourd
แหล่งที่มา