Hướng dẫn jquery remove css property from style - jquery xóa thuộc tính css khỏi kiểu

Tôi có một div với tài sản này style="-moz-user-select:none; position:static !important;". Tôi cần phải loại bỏ -moz-user-select đã thử với $(selector).css() nhưng tôi không biết thiết lập giá trị nào vì đó là "none".

Syscall

18.4K10 Huy hiệu vàng34 Huy hiệu bạc 50 Huy hiệu Đồng10 gold badges34 silver badges50 bronze badges

Khi được hỏi ngày 10 tháng 5 năm 2011 lúc 14:10May 10, 2011 at 14:10

1

Tài liệu cho CSS () nói rằng việc đặt thuộc tính kiểu thành chuỗi trống sẽ xóa thuộc tính đó nếu nó không nằm trong bảng kiểu:

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ:

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

0 - Loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua phương thức

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

1 của JQuery hoặc thông qua thao tác trực tiếp của thuộc tính kiểu. Tuy nhiên, nó không loại bỏ một kiểu đã được áp dụng với quy tắc CSS trong một phần tử hoặc phần tử

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

2.

Vì phong cách của bạn là nội tuyến, bạn có thể viết:

$(selector).css("-moz-user-select", "");

Syscall

18.4K10 Huy hiệu vàng34 Huy hiệu bạc 50 Huy hiệu Đồng10 gold badges34 silver badges50 bronze badges

Khi được hỏi ngày 10 tháng 5 năm 2011 lúc 14:10May 10, 2011 at 14:14

Tài liệu cho CSS () nói rằng việc đặt thuộc tính kiểu thành chuỗi trống sẽ xóa thuộc tính đó nếu nó không nằm trong bảng kiểu:Frédéric Hamidi

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ:

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

0 - Loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua phương thức

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

1 của JQuery hoặc thông qua thao tác trực tiếp của thuộc tính kiểu. Tuy nhiên, nó không loại bỏ một kiểu đã được áp dụng với quy tắc CSS trong một phần tử hoặc phần tử

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

2.41 gold badges478 silver badges473 bronze badges

1

Vì phong cách của bạn là nội tuyến, bạn có thể viết:

Đã trả lời ngày 10 tháng 5 năm 2011 lúc 14:14

Frédéric Hamidifrédéric Hamidisplit->filter->join

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

254K41 Huy hiệu vàng478 Huy hiệu bạc473 Huy hiệu đồng

Tôi biết câu hỏi này là về jQuery, nhưng muốn thêm (đối với những người như tôi, người vấp ngã ở đây từ Google) một giải pháp với vani JS:Dec 22, 2021 at 17:42

(Dựa trên ý chính của tôi)vsync

Dưới đây là sự cố của phương thức, nhưng loại bỏ các nhận xét và nó khá nhỏ và đơn giản một lần chia nhỏ-> bộ lọc-> Tham gia54 gold badges294 silver badges376 bronze badges

Xen kẽ cũng có thể được thực hiện với regex

Khi được hỏi ngày 10 tháng 5 năm 2011 lúc 14:10May 10, 2011 at 14:14

Tài liệu cho CSS () nói rằng việc đặt thuộc tính kiểu thành chuỗi trống sẽ xóa thuộc tính đó nếu nó không nằm trong bảng kiểu:dmorlock

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ:

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

0 - Loại bỏ thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua phương thức

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

1 của JQuery hoặc thông qua thao tác trực tiếp của thuộc tính kiểu. Tuy nhiên, nó không loại bỏ một kiểu đã được áp dụng với quy tắc CSS trong một phần tử hoặc phần tử

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

2.4 gold badges18 silver badges22 bronze badges

1

JQuery Xóa kiểu nội tuyến CSS: Ở đây trong bài viết này, chúng tôi tìm hiểu cách chúng tôi loại bỏ thuộc tính CSS kiểu nội tuyến trong jQuery. Trong khi phát triển một trang web nếu chúng tôi đã sử dụng bất kỳ chủ đề nào cho thiết kế của chúng tôi, chúng tôi đã phát hiện ra rằng các thẻ HTML của chúng tôi có thể là thẻ div hoặc bất kỳ yếu tố nào khác có một số kiểu nội tuyến không cần thiết. Here in this article, we learn how we remove inline style CSS property in jQuery. While developing a website if we have used any themes for our design, we have found that our HTML tags may be div tags or any other element that has some unnecessary inline style.

Phong cách nội tuyến này làm cho thiết kế trang của chúng tôi bị bẩn. Để khắc phục vấn đề thiết kế này, chúng tôi cần loại bỏ tất cả các kiểu nội tuyến và thực hiện việc này thủ công là một nhiệm vụ tẻ nhạt.

Nhưng với & nbsp; jQuery, chúng ta có thể đạt được nó với một vài dòng mã. Vì vậy, sau đó chúng ta có thể thêm kiểu dáng CSS của riêng mình để làm cho nó trông giống như theo yêu cầu của chúng ta.

2 cách tiếp cận khác nhau để loại bỏ kiểu CSS nội tuyến trong jQuery.

• Sử dụng removeAttr () để loại bỏ tất cả các thuộc tính kiểu nội tuyến.
• Sử dụng CSS () để loại bỏ thuộc tính CSS cụ thể.

Xóa đầu ra demo jQuery kiểu như sau:

# Sử dụng jQuery .RemoveAttr () để loại bỏ tất cả các kiểu nội tuyến.

Để xóa hoặc xóa tất cả thuộc tính kiểu nội tuyến khỏi trang web của chúng tôi, chúng tôi chỉ cần sử dụng phương thức jQuery

const removeStyleProp = (elm, prop) => 
  elm.style.cssText = elm.style.cssText // "top: 0px; bottom: 50px; text-align: right;"
    .split('; ') // ["top: 0px", "bottom: 50px", "right: 2px", "text-align: right;"]
    .filter(p => !p.startsWith(prop) ) // ["top: 0px", "bottom: 50px", "text-align: right;"]
    .join(';');

// usage:
removeStyleProp(test, 'right')
console.log( test.style.cssText )

3. & NBSP; Sử dụng..removeAttr() we remove a specific attribute in jQuery from the selected elements.

Ở đây chúng tôi có một thẻ div chứa nhiều thuộc tính CSS như được viết dưới đây và hiện đang sử dụng .RemoveDtr () sẽ xóa tất cả các kiểu nội tuyến của nó. & NBSP; Về cơ bản, chúng tôi mã trong jQuery để xóa CSS tất cả các thuộc tính.html:.removeAttr() will remove all its inline style.  Basically, we code in jQuery to clear CSS all properties.
HTML:

	
hello world

Remove All Inline Style
Remove Inline Style width

JQuery: Đây là mã jQuery trong đó trên nút nhấp, chúng tôi xóa tất cả các thuộc tính kiểu của phần tử div của chúng tôi.Here's the jquery code where on button click, we remove all the style property of our div element.

$("#btn_1").on('click', function() {
 $("#foo").removeAttr("style");
});

Xem bản demo

Ở đây trong bản demo trên, cách dễ dàng với jQuery loại bỏ kiểu phần tử div được triển khai thành công.

# Sử dụng phương thức jQuery .css () để xóa thuộc tính CSS cụ thể.

Trong ví dụ trước, chúng ta học cách xóa tất cả các thuộc tính kiểu nội tuyến. Nhưng nếu chúng ta muốn loại bỏ một thuộc tính cụ thể. Ví dụ: nếu chúng ta muốn loại bỏ chiều rộng duy nhất khỏi kiểu nội tuyến, hoặc nếu chúng ta muốn loại bỏ chỉ chiều cao khỏi nó. Nói tóm lại, làm thế nào để chúng ta xóa một thuộc tính CSS cụ thể trong jQuery?remove one specific property. For example, if we want to remove the only width from inline style, or if we want to remove only height from it. In short, how do we delete a specific CSS property in jQuery?

Cho rằng chúng tôi sử dụng phương thức jQuery .css (), phương thức này đặt hoặc trả về một hoặc nhiều thuộc tính kiểu cho các phần tử đã chọn. Vì chúng tôi muốn xóa thuộc tính chiều rộng để chúng tôi sử dụng phương thức .css () & nbsp; và đặt chiều rộng thành trống. & Nbsp;.CSS() method, this method sets or returns one or more style properties for the selected elements. As we want to remove the width property so we use the .css() method and set the width as blank. 

Bằng cách này, nó sẽ loại bỏ chiều rộng khỏi kiểu nội tuyến. Tương tự chúng ta có thể làm cho chiều cao, đỉnh, vị trí bên trái tương ứng

JQuery: Ở đây trên nút nhấp chuột, chúng tôi sử dụng phương thức .css () và đặt chiều rộng làm giá trị trống để loại bỏ thuộc tính CSS có chiều rộng khỏi kiểu nội tuyến.Here on button click, we use the .css() method and set the width as an empty value to remove the width CSS property from inline style.

Mã như được viết dưới đây.

$("#btn_2").on('click', function() {
  $("#foo").css("width", "");
});

Xem bản demo

Ở đây trong bản demo trên, cách dễ dàng với jQuery loại bỏ kiểu phần tử div được triển khai thành công. Here we learn about how to use .removeAttr() and .CSS() method to remove or manipulate inline CSS style. And able to customize our web page styling. 

# Sử dụng phương thức jQuery .css () để xóa thuộc tính CSS cụ thể.

Trong ví dụ trước, chúng ta học cách xóa tất cả các thuộc tính kiểu nội tuyến. Nhưng nếu chúng ta muốn loại bỏ một thuộc tính cụ thể. Ví dụ: nếu chúng ta muốn loại bỏ chiều rộng duy nhất khỏi kiểu nội tuyến, hoặc nếu chúng ta muốn loại bỏ chỉ chiều cao khỏi nó. Nói tóm lại, làm thế nào để chúng ta xóa một thuộc tính CSS cụ thể trong jQuery?

• Cho rằng chúng tôi sử dụng phương thức jQuery .css (), phương thức này đặt hoặc trả về một hoặc nhiều thuộc tính kiểu cho các phần tử đã chọn. Vì chúng tôi muốn xóa thuộc tính chiều rộng để chúng tôi sử dụng phương thức .css () & nbsp; và đặt chiều rộng thành trống. & Nbsp;
• Bằng cách này, nó sẽ loại bỏ chiều rộng khỏi kiểu nội tuyến. Tương tự chúng ta có thể làm cho chiều cao, đỉnh, vị trí bên trái tương ứng
  

JQuery: Ở đây trên nút nhấp chuột, chúng tôi sử dụng phương thức .css () và đặt chiều rộng làm giá trị trống để loại bỏ thuộc tính CSS có chiều rộng khỏi kiểu nội tuyến.

1. Mã như được viết dưới đây.
2. Kết luận: Ở đây chúng ta tìm hiểu về cách sử dụng phương thức. Và có thể tùy chỉnh kiểu dáng trang web của chúng tôi. & Nbsp;
3. Nói tóm lại, chúng tôi có thể xóa tất cả các thuộc tính kiểu hoặc thuộc tính CSS cụ thể như sửa đổi chiều cao, chiều rộng, màu sắc, v.v.
4. Tài liệu tham khảo khác:
5. phương thức jQuery .css ()

JQuery .RemoveAttr () Phương thức

Bạn cũng có thể kiểm tra các bài viết sau: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Xem trước hình ảnh trước khi tải lên nó với jQuery trong ASP.NET. to our newsletter

Cách nhận tên tệp, kích thước, nhập nhập trong jQuery [Tệp đầu vào, API tệp].

Làm thế nào chúng ta có thể loại bỏ CSS trong jQuery?

RemoveAttr trong jQuery là gì?