Xóa CSS khỏi Div bằng JQuery

Tôi mới biết về JQuery. Trong ứng dụng của tôi, tôi có những điều sau đây:

$("#displayPanel div").live("click", function(){
  $(this).css({'background-color' : 'pink', 'font-weight' : 'bolder'});
});

Khi tôi nhấp vào Div, màu của Div đó sẽ thay đổi. Trong chức năng Click đó tôi có một số chức năng để làm. Sau tất cả những gì tôi muốn xóa Css đã áp dụng khỏi Div. Làm thế nào tôi có thể làm điều đó trong JQuery?

Đặt các thuộc tính CSS của bạn vào một lớp, sau đó làm một cái gì đó như thế này:

$("#displayPanel div").live("click", function(){
   $(this).addClass('someClass');
});

Sau đó, 'các chức năng khác' của bạn đang làm gì đó như:

$("#myButton").click(function(){
   $("#displayPanel div").removeClass('someClass');
});

Bạn có thể xóa css cụ thể trên phần tử như thế này:

$(this).css({'background-color' : '', 'font-weight' : ''});

Mặc dù tôi đồng ý với karim rằng có lẽ bạn nên sử dụng các lớp CSS.

Bạn có thể sử dụng phương thức removeAttr, nếu bạn muốn xóa tất cả kiểu nội tuyến bạn đã thêm bằng tay với javascript. Tốt hơn là sử dụng các lớp CSS nhưng bạn không bao giờ biết.

$("#displayPanel div").removeAttr("style")

Bạn có thể xóa thuộc tính nội tuyến theo cách này:

$(selector).css({'property':'', 'property':''});

Ví dụ:

$(actpar).css({'top':'', 'opacity':''});

Điều này về cơ bản được đề cập ở trên, và nó chắc chắn thực hiện các mẹo.

BTW, điều này rất hữu ích trong các trường hợp như khi bạn cần xóa trạng thái sau khi hoạt hình. Chắc chắn tôi có thể viết một nửa tá lớp để giải quyết vấn đề này hoặc tôi có thể sử dụng lớp cơ sở của mình và #id làm một số phép toán và xóa kiểu nội tuyến mà hoạt hình áp dụng.

$(actpar).animate({top:0, opacity:1, duration:500}, function() {
   $(this).css({'top':'', 'opacity':''});
});

jQuery.fn.extend
({
    removeCss: function(cssName) {
        return this.each(function() {
            var curDom = $(this);
            jQuery.grep(cssName.split(","),
                    function(cssToBeRemoved) {
                        curDom.css(cssToBeRemoved, '');
                    });
            return curDom;
        });
    }
});

/*example code: I prefer JQuery extend so I can use it anywhere I want to use.

$('#searchJqueryObject').removeCss('background-color');
$('#searchJqueryObject').removeCss('background-color,height,width'); //supports comma separated css names.

*/

HOẶC LÀ

//this parse style & remove style & rebuild style. I like the first one.. but anyway exploring..
jQuery.fn.extend
({
    removeCSS: function(cssName) {
        return this.each(function() {

            return $(this).attr('style',

            jQuery.grep($(this).attr('style').split(";"),
                    function(curCssName) {
                        if (curCssName.toUpperCase().indexOf(cssName.toUpperCase() + ':') <= 0)
                            return curCssName;
                    }).join(";"));
        });
    }
});

Lưu ý, tùy thuộc vào tài sản, bạn có thể đặt thành tự động.

Đặt giá trị mặc định, ví dụ:

$ (này) .css ("chiều cao", "tự động");

hoặc trong trường hợp các tính năng CSS khác

$ (này) .css ("chiều cao", "kế thừa");

Trên thực tế, cách tốt nhất mà tôi đã tìm thấy để làm điều này khi phải thực hiện kiểu dáng dựa trên jquery phức tạp, ví dụ, nếu bạn có một phương thức mà bạn cần hiển thị nhưng nó cần tính toán bù đắp trang để có được các tham số chính xác cần phải đi vào hàm jQuery ("x"). css ({}).

Vì vậy, đây là cài đặt của các kiểu, đầu ra của các biến đã được tính toán dựa trên các yếu tố khác nhau.

$(".modal").css({ border: "1px solid #ccc", padding: "3rem", position: "absolute", zIndex: 999, background: "#fff", top: "30", visibility: "visible"})

Để xóa các phong cách. thay vì thiết lập một cái gì đó như

$(".modal").css({ border: "", padding: "", position: "", zIndex: 0, background: "", top: "", visibility: ""})

Cách đơn giản sẽ là

$(".modal").attr("style", "")

Khi jquery thao tác các phần tử trên dom, các kiểu được ghi vào phần tử trong thuộc tính "style" như thể bạn đang viết kiểu nội tuyến. Tất cả bạn phải làm là xóa thuộc tính đó và mục sẽ đặt lại về kiểu ban đầu của nó

Hi vọng điêu nay co ich

tôi cũng có cùng một thăm dò, chỉ cần loại bỏ giá trị

<script>
      $("#play").toggle(function(){$(this).css("background","url(player.png) -100px 0px no-repeat");},
      function(){$(this).css("background","");});
</script>

Nếu bạn không muốn sử dụng các lớp (mà bạn thực sự cần), cách duy nhất để thực hiện những gì bạn muốn là bằng cách lưu các kiểu thay đổi trước:

var oldFontSize = $(this).css("font-size");
var oldBackgroundColor = $(this).css("background-color");

// set style
// do your thing

$(this).css("font-size",oldFontSize);
// etc...

Tôi đã sử dụng giải pháp thứ hai của user147767

Tuy nhiên, có một lỗi đánh máy ở đây. Nó nên

curCssName.toUpperCase (). indexOf (cssName.toUpperCase () + ':') <0

không <= 0

Tôi cũng đã thay đổi điều kiện này cho:

! curCssName.match (RegExp mới (cssName + "(-. +)?:"), "mi")

vì đôi khi chúng tôi thêm một thuộc tính css trên jQuery và nó được thêm vào theo một cách khác cho các trình duyệt khác nhau (tức là thuộc tính viền sẽ được thêm dưới dạng "viền" cho Firefox và "viền trên", "viền dưới", v.v. cho IE ).

Trước khi thêm một lớp, bạn nên kiểm tra xem nó đã có lớp với phương thức .hasClass () chưa

Đối với câu hỏi cụ thể của bạn. Bạn nên đặt công cụ của mình vào Biểu định kiểu xếp chồng. Đó là cách tốt nhất để phân tách thiết kế và chức năng.

Vì vậy, giải pháp đề xuất thêm và xóa tên lớp là cách thực hành tốt nhất.

tuy nhiên khi bạn thao túng các yếu tố, bạn không kiểm soát cách chúng được hiển thị. removeAttr ('style') là cách TỐT NHẤT để xóa tất cả các kiểu nội tuyến.

Tôi sửa đổi user147767 của giải pháp một chút để làm cho nó có thể sử dụng strings, arraysvà objectsnhư là đầu vào:

/*!
 * jquery.removecss.js v0.2 - https://stackoverflow.com/a/17196154/1250044
 * Remove multiple properties from an element in your DOM.
 *
 * @author Yannick Albert | #yckart
 * @param {Array|Object|String} css
 *
 * Copyright (c) 2013 Yannick Albert (http://yckart.com)
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
 * 2013/06/19
 **/

$.fn.removeCss = function (css) {
    var properties = [];
    var is = $.type(css);

    if (is === 'array') properties = css;
    if (is === 'object') for (var rule in css) properties.push(rule);
    if (is === 'string') properties = css.replace(/,$/, '').split(',');

    return this.each(function () {
        var $this = $(this);
        $.map(properties, function (prop) {
            $this.css(prop, '');
        });
    });
};

// set some styling
$('body').css({
    color: 'white',
    border: '1px solid red',
    background: 'red'
});

// remove it again
$('body').removeCss('background');
$('body').removeCss(['border']);
$('body').removeCss({
    color: 'white'
});

http://jsfiddle.net/ARTsinn/88mJF/