我们如何通过Javascript从CSS文件中删除填充？

Question

I have library file where padding is defined for common column class.

[class*="col_"] {
  box-sizing: border-box;
  padding: 0 0.5rem 1rem;
  max-width: 100%; }

I don't want to remove it, in fact I want to override CSS where I want to remove padding style itself calling either by JavaScript or jQuery.

[class*="col_"] {
 box-sizing: border-box;
 max-width: 100%; }

Answer 1

使用jQuery显式设置元素的填充：

$("[class*=col_]").css("padding", 0);

Answer 2

You can create a class like: .no_padding {padding:0;}

And then, you can add that class to the specific elements you want using javascript or jquery:

// js
var element = document.getElementById("specific_element");
  element.classList.add("no_padding");

// jquery
$("#specific_element.col_x").addClass("no_padding"); 

Answer 3

You can select all elements that match that selector

let elements = document.querySelectorAll("[class*=col_]");
elements.forEach(e => { 
     e.style.padding = '';
}

Or add a new style rule on the fly:

let newStyle = document.createElement('style');
newStyle.id = Date.now(); //set a id for removing the style later if necessary
newStyle.innerHTML = `
    [class*="col_"] {
       box-sizing: border-box;
       max-width: 100%; 
    }`;

document.body.appendChild(newStyle);