我想删除一个样式,例如:
img{width:calc(100% - 10px)}
来自我的<style>
,它是由<head>
内的插件动态插入的。我尝试了很多方法但没有任何帮助。
ThElement.find('style').remove();
通过使用上面的代码我可以一起删除所有<style>
,但我需要删除唯一的单一样式。那有没有办法做到这一点。
我不想添加新样式,我只想删除现有的样式
这是一个小提琴:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
margin: 0px;
height: auto;
}
body {
height: auto;
padding: 10px;
background: transparent;
color: #000000;
position: relative;
z-index: 2;
-webkit-user-select: auto;
margin: 0px;
overflow: hidden;
min-height: 20px;
}
body:after {
content: "";
display: block;
clear: both;
}
body::-moz-selection {
background: #b5d6fd;
color: #000;
}
body::selection {
background: #b5d6fd;
color: #000;
}
body,
textarea {
min-height: 500px !important;
}
body,
body:focus {
outline: transparent solid 0px;
}
body {
background: transparent;
position: relative;
z-index: 2;
overflow-x: auto;
user-select: auto;
}
body a {
user-select: auto;
}
body table td,
body table th {
border: 1px solid rgb(221, 221, 221);
}
body table td:empty,
body table th:empty {
height: 20px;
}
body table td,
body table th {
border: 1px double red;
}
body table td,
body table th {
border-width: 2px;
}
body table th {
background: rgb(230, 230, 230);
}
body hr {
clear: both;
user-select: none;
break-after: page;
}
body img {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - 10px);
}
body {
position: relative;
}
body ::after {
position: relative;
font-weight: normal;
}
body pre {
white-space: pre-wrap;
word-wrap: break-word;
}
body blockquote {
border-left: 2px solid rgb(94, 53, 177);
margin-left: 0px;
padding-left: 5px;
color: rgb(94, 53, 177);
}
body blockquote blockquote {
border-color: rgb(0, 188, 212);
color: rgb(0, 188, 212);
}
body blockquote blockquote blockquote {
border-color: rgb(67, 160, 71);
color: rgb(67, 160, 71);
}
body span {
font-weight: normal;
display: inline;
line-height: 0;
}
body span {
font-size: inherit;
height: 1em;
width: 1em;
min-height: 20px;
min-width: 20px;
display: inline-block;
margin: -0.2em 0.15em 0.2em;
line-height: normal;
vertical-align: middle;
}
</style>
</head>
<body>
<img src="http://lorempixel.com/400/600/">
</body>
</html>
我只是想从中删除body img
风格。
这看起来有点时髦,但你可以使用String.replace()和Regular Expression删除特定的规则。
像这样的东西:
var style = $('head>style');
style.text( style.text().replace(/(img\s*\{[^}]*)max-width:\s*calc\(100%\s*-\s*10px\);([^}]*\})/g, "$1$2") );
或者,删除所有img样式有点简单:
var style = $('head>style');
style.text( style.text().replace(/img\s*\{[^}]*\}/g, "img {}") );
如果您需要删除更具体的选择器,那么您可以修改regex
:
var style = $('head>style');
style.text( style.text().replace(/body\simg\.fr-dii\s*\{[^}]*\}/g, "") );
你可以覆盖头部风格
:)