วิธีการลบคุณสมบัติ CSS โดยใช้จาวาสคริปต์?

195

เป็นไปได้หรือไม่ที่จะลบคุณสมบัติ CSS ขององค์ประกอบโดยใช้ JavaScript เช่นฉันมีdiv.style.zoom = 1.2ตอนนี้ฉันต้องการลบคุณสมบัติการซูมผ่าน JavaScript หรือไม่

javascript css

— กกท.
แหล่งที่มา

3

กรุณาชี้แจง: คุณพยายามที่จะลบชั้นเรียนจากองค์ประกอบบางส่วนหรือแอตทริบิวต์จากองค์ประกอบบางส่วน?

— Jan Hančič

1

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

— sat

ทำไม downvote มันเป็นคำถามที่ดีพอไม่

— Roland Bouman

2

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

— Roland Bouman

1

@RolandBouman จริง ๆ แล้วคำตอบที่ยอมรับควรเปลี่ยนเป็นของ Edvinas Ilčenkoเพราะมันเกี่ยวข้องกับสิ่งที่ถูกถามเกี่ยวกับการลบมากกว่าการเปลี่ยนเป็นค่าเริ่มต้น คำตอบของคุณยังคงมีคุณค่าดังนั้นฉันจึงแก้ไขเพื่อชี้แจงความแตกต่าง

— whitneyland

187

คุณมีสองทางเลือก:

ตัวเลือกที่ 1:

คุณสามารถใช้วิธีการ removeProperty มันจะลบสไตล์ออกจากองค์ประกอบ

el.style.removeProperty('zoom');

ตัวเลือก 2:

คุณสามารถตั้งค่าเป็นค่าเริ่มต้น:

el.style.zoom = "";

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

— Roland Bouman
แหล่งที่มา

... พร้อมกับ CSS ผู้ใช้และสไตล์เริ่มต้นของเบราว์เซอร์

— เควนติ

ฉันเข้าใจว่า OP หมายถึงว่าพวกเขาต้องการสร้างมันราวกับว่าพวกเขาไม่ได้ตั้งค่าคุณสมบัติขององค์ประกอบซึ่งเป็นสิ่งที่คุณให้มา ฉันพยายามใช้ el.style.removeProperty ('ซูม'); (หรือ 'เติม' จริง ๆ แล้วในกรณีของฉัน) ที่ดูเหมือนจะทำสิ่งเดียวกันใน IE และเบราว์เซอร์อื่นจะไม่สนใจ ด้วยเหตุผลบางอย่างฉันรู้สึกประหลาดใจที่พบว่าการตั้งค่าเป็นสตริงว่างมีผลเหมือนกันและดูเหมือนว่าจะทำงานกับเบราว์เซอร์ (เวอร์ชันล่าสุด) ทั้งหมด

— Shavais

พฤติกรรมนี้ถูกระบุไว้ที่ใดก็ได้ในมาตรฐานหรือไม่? ฉันหามันไม่พบ :-(

— Oliver Joseph Ash

@OliverJosephAsh ใช่มีเอกสารแล้วโปรดดูคำตอบด้านล่างstackoverflow.com/a/7901886/700206

— whitneyland

120

removePropertyจะลบสไตล์ออกจากองค์ประกอบ

ตัวอย่าง:

div.style.removeProperty ( 'ซูม');

หน้าเอกสาร MDN:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
แหล่งที่มา

25

div.style.removeProperty('zoom');

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

10

คุณสามารถใช้วัตถุ styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Caveat # 1: คุณต้องรู้ดัชนีของสไตล์ชีทและดัชนีของกฎของคุณ

Caveat # 2: วัตถุนี้มีการใช้งานไม่สอดคล้องกันโดยเบราว์เซอร์; สิ่งที่ใช้งานได้ในหนึ่งอาจไม่ทำงานในที่อื่น

— james.garriss
แหล่งที่มา

ดูเหมือนจะเปราะบางจริงๆ มันจะไม่แตกเมื่อดัชนีของคุณเปลี่ยนแปลงหรือไม่

— Casey Rodarmor

อ๋อ นั่นคือสิ่งที่ caveat # 1 พูด

— james.garriss

Chrome 26 ของฉันไม่มีCSSStyleRule.prototype.removeProperty= (อันที่จริงCSSStyleRuleไม่มีวิธีใด ๆ = (

— Rudie

CSSStyleSheet.prototype.removeRuleช่วยเหลือ.

— Rudie

@Rudie CSSStyleSheet.prototype.deleteRuleใช่มั้ย

— roka

7

element.style.height = null;

เอาท์พุท:

<div style="height:100px;"> 
// results: 
<div style="">

— T.Todua
แหล่งที่มา

ดูเหมือนว่าการตั้งค่าสไตล์เป็นโมฆะไม่ทำงานใน IE11

— MaximeW

1

ทำไมบางคนควรดูแลIEเบราว์เซอร์? ฉันตั้งใจเพิกเฉยมันไปหลายปีแล้ว

— T.Todua

4

คุณสามารถลองค้นหาองค์ประกอบทั้งหมดที่มีคลาสนี้และตั้งค่าคุณสมบัติ "ซูม" เป็น "ไม่มีอะไร"

หากคุณใช้ไลบรารี jQuery javascript คุณสามารถทำได้ด้วย $(".the_required_class").css("zoom","")

แก้ไข: นำคำสั่งนี้ออกเนื่องจากไม่เป็นความจริงตามที่ระบุไว้ในความคิดเห็นและคำตอบอื่น ๆ ซึ่งเป็นไปได้จริงตั้งแต่ปี 2010

False: ไม่มีวิธีที่รู้จักกันโดยทั่วไปสำหรับการแก้ไขสไตล์ชีทจาก JavaScript

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

5

ใช่แล้ว การปรับเปลี่ยนสไตล์ชีทโดยทางโปรแกรม แต่จาวาสคริปต์นั้นไม่ยาก มันทำงานข้ามเบราว์เซอร์ด้วยประสิทธิภาพที่ยอดเยี่ยมและเหมาะสมเมื่อเปลี่ยนคุณสมบัติหนึ่งอย่างที่ควรจะเหมือนกันในองค์ประกอบหลาย ๆ อย่าง เช่นเดียวกับกรณีเดือนมกราคม 2010 เช่นกัน นี่คือตัวอย่างสั้น ๆ : stackoverflow.com/questions/14927706/…

— Clox

Clox: การเพิ่มสไตล์ชีทที่แทนที่คุณสมบัติบางอย่างโดยทางโปรแกรม - แน่นอน! แก้ไขสิ่งที่โหลดแล้ว - ยังไม่ได้ยิน

— ไร้เดียงสา

มันหมายถึงการเป็น CSS () มากกว่า attr () หรืออาจจะเป็น attr () ใน IE?

— Alex KeySmith

มันควรจะเป็นจริงcssไม่ใช่attrคุณพูดถูก

— ไร้เดียงสา

1

คุณสามารถทำได้ใน jQuery โดยพูด $(selector).css("zoom", "")

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

0

สิ่งนี้ควรทำเคล็ดลับ - การตั้งค่ารูปแบบอินไลน์เป็นปกติสำหรับการซูม:

$ ('div'). attr ("style", "zoom: normal;");

— ด้าน
แหล่งที่มา

1

คำถามคือวิธีการลบสไตล์คำตอบนี้จะทำลายสไตล์ทั้งหมดที่มีอยู่และแทนที่ด้วยสไตล์ใหม่

— whitneyland

0

จริง ๆ แล้วถ้าคุณรู้คุณสมบัตินี้แล้วจะทำ ...

ตัวอย่างเช่น:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

โปรดทราบว่านี่ใช้งานได้กับสไตล์อินไลน์เท่านั้น ... ไม่ใช่สไตล์ที่คุณระบุผ่านคลาสหรือบางอย่างเช่น ...

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

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

-3

ในการเปลี่ยนคลาสทั้งหมดสำหรับองค์ประกอบให้ทำดังนี้

document.getElementById("ElementID").className = "CssClass";

ในการเพิ่มคลาสเพิ่มเติมให้กับองค์ประกอบให้ทำดังนี้

document.getElementById("ElementID").className += " CssClass";

วิธีตรวจสอบว่ามีการใช้คลาสกับองค์ประกอบหรือไม่:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

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

1

คำถามคือวิธีลบสไตล์คำตอบนี้ไม่มีส่วนเกี่ยวข้องกับเรื่องนั้น

— whitneyland