我想在用户点击一个按钮时修改页面的CSS(隐藏某个类的元素,“class”)。我似乎无法找到正确的JavaScript来获取此按钮来触发样式更改。我宁愿避免在我的解决方案中使用jQuery。更改HTML按钮点击CSS?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="content.js"></script>
</head>
<body>
<p>hide "class"</p>
<button type="button" onclick="hide_class()">hide class</button>
</body>
</html>
的JavaScript:
function hide_class() {
document.addEventListener("DOMSubtreeModified", function (event) {
if (document.getElementsByClassName(".class")) {
var x = document.querySelectorAll(".class");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.visibility = "hidden";
}
}
});
}
编辑:这是我的manifest.json 和background.js
manifest.json的(没有引用content.js):
{
"manifest_version": 2,
"name": "my extension",
"description": "it doesnt work",
"version": "0.1",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"declarativeContent"
],
"page_action": {
"default_popup": "popup.html"
},
"icons" : { "16": "16.png",
"48": "48.png",
"128": "128.png" },
}
Background.js:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' }, //url contains g
})
],
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
你想添加监听或改变风格? –
我想在点击按钮时改变样式,但我相信我需要实现监听器来改变样式,除非有人对如何实现这一点有更好的想法。 – Nat
侦听器侦听到更改,但不会启动更改 –