ตั้งค่าคุณสมบัติ CSS ใน Javascript หรือไม่

162

ฉันได้สร้างสิ่งต่อไปนี้ ...

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

ตอนนี้ฉันจะตั้งค่าคุณสมบัติ CSS ได้width: 100pxอย่างไร

javascript css

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

253

การใช้element.style:

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

— KJYe.Name 葉家仁
แหล่งที่มา

14

แล้วคนที่ไม่เป็นทางการจะเป็น-webkit-background-sizeอย่างไร? มีวิธีการตั้งค่าเหล่านี้ด้วย js ธรรมดาหรือเราต้องใช้ jQuery?

— ลุค

60

@Luke obj.style ["- webkit-background-size"] = "400px"

— Daniel X Moore

นี่เป็นลักษณะขององค์ประกอบในองค์ประกอบไม่ใช่ในสไตล์ชีท

— Aft3rL1f3

56

เพียงตั้งค่าstyle:

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

หรือหากคุณต้องการคุณสามารถใช้jQuery :

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

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

5

@Sime - คำพูดของฉันไม่สอดคล้องกัน ฉันมักจะใช้เครื่องหมายคำพูดคู่สำหรับ JS เสมอนั่นเป็นมาตรฐานในที่ทำงาน อย่างไรก็ตามบรรทัดแรกมีคำพูดเดียวที่ฉันคัดลอกมาจากคำถาม OPs แก้ไขแล้วตอนนี้

— djdd87

1

ตอนนี้พวกเขาก็โอเค แต่พวกเขาไม่สอดคล้องกับความคิดเห็นของฉัน:)

— Šime Vidas

2

@Sime - ฉันได้ยืนยันว่า: "อย่างไรก็ตามบรรทัดแรกมีเครื่องหมายคำพูดเดี่ยวเมื่อฉันคัดลอกมาจากคำถาม OPs แก้ไขได้แล้วตอนนี้"

— djdd87

35

สำหรับสไตล์ส่วนใหญ่ทำสิ่งนี้:

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

สำหรับสไตล์ที่มียัติภังค์ในชื่อให้ทำสิ่งนี้แทน:

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

— Daniel X Moore
แหล่งที่มา

17

ที่จริงแล้วค่อนข้างง่ายด้วย JavaScript วานิลลา:

menu.style.width = "100px";

— Justin Niessner
แหล่งที่มา

14

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

ลองนึกภาพถ้าคุณมีนักออกแบบในการปรับเปลี่ยนเว็บไซต์ ... พวกเขาควรจะสามารถทำงานได้อย่างหมดจดใน CSS โดยไม่ต้องทำงานกับ JavaScript ของคุณ

ในต้นแบบฉันจะทำ:

$(newElement).addClassName('blah')

— กรงขัง
แหล่งที่มา

1

+1 จากฉัน - ง่ายกว่า / สะอาดกว่าเพื่อแยก CSS ทั้งหมดออกจากกัน

— Ian Oxley

1

รุ่น jQuery ของสิ่งนี้สำหรับการอ้างอิง ...$(selector).addClass('blah')

— zgr024

8

สำหรับคนที่ต้องการทำสิ่งเดียวกันในปี 2018

คุณสามารถกำหนดคุณสมบัติ CSS ที่กำหนดเองให้กับองค์ประกอบของคุณ (ผ่าน CSS หรือ JS) และเปลี่ยนแปลง:

การกำหนดผ่าน CSS:

element {
  --element-width: 300px;

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

การมอบหมายผ่าน JS

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

รับค่าคุณสมบัติผ่าน JS

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

ลิงค์ที่เป็นประโยชน์ที่นี่:

— Mattia Astorino
แหล่งที่มา

6

เมื่อทำการดีบั๊กฉันชอบที่จะสามารถเพิ่มแอตทริบิวต์ css ในหนึ่งบรรทัด:

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

เริ่มคุ้นเคยกับสไตล์นี้คุณสามารถเพิ่ม css มากมายในหนึ่งบรรทัดเช่น:

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

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

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'"/>

— Mohsin Khan
แหล่งที่มา

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>

— Mohsin Khan
แหล่งที่มา

1

สิ่งนี้จะทำงานได้ดีกับคุณสมบัติ CSS ส่วนใหญ่หากไม่มีเครื่องหมายขีดกลาง

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

สิ่งสำคัญคือต้องเข้าใจว่ารหัสตะโกนไม่เปลี่ยนสไตล์ชีท แต่เปลี่ยน DOM:

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

DOM เก็บค่าที่คำนวณได้ของคุณสมบัติองค์ประกอบสไตล์ชีทและเมื่อคุณเปลี่ยนสไตล์องค์ประกอบโดยใช้ Javascript คุณจะเปลี่ยน DOM สิ่งนี้เป็นสิ่งสำคัญที่ควรทราบและเข้าใจเนื่องจากวิธีการเขียนโค้ดของคุณอาจส่งผลต่อการเปลี่ยนแปลงของคุณ หากคุณพยายามที่จะรับค่าที่ไม่ได้เขียนโดยตรงไปยังองค์ประกอบเองเช่นนั้น ...

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

... คุณจะส่งคืนค่าที่ไม่ได้กำหนดซึ่งจะถูกเก็บไว้ในตัวแปร 'propertyValue' ของโค้ดตัวอย่าง หากคุณกำลังทำงานกับการรับและการตั้งค่าคุณสมบัติที่เขียนไว้ใน CSS style-sheet และคุณต้องการฟังก์ชั่นเดียวที่ได้รับเช่นเดียวกับการตั้งค่า style-property-values ในสถานการณ์นี้ซึ่งเป็นสถานการณ์ที่พบได้บ่อยมาก ถ้าอย่างนั้นคุณต้องใช้ JQuery

$(selector).css(property,value)

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

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

ข้อเสียของวิธีนี้คือเมธอด getComputedValue จะได้รับเท่านั้นโดยไม่ได้ตั้งค่าไว้ ค่าใช้จ่ายในการคำนวณของ Mozillaลิงก์นี้ให้รายละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่ฉันได้กล่าวถึงที่นี่ หวังว่านี่จะช่วยให้คน !!!

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

ฉันคิดว่ารหัสบล็อกแรกของคุณไม่มีเนื้อหาหรือไม่

— zb226

1

มีการแก้ไข

— Aft3rL1f3