更改CSS上的HTML按鈕單擊？

Question

我想在用戶單擊按鈕時修改頁面的CSS（隱藏某個類的元素，即“類”）。 我似乎找不到正確的JavaScript來獲取此按鈕來觸發樣式更改。 我寧願在解決方案中避免使用jQuery。

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() ]
  }
 ]);
 });
 });

Answer 1

您可以將事件偵聽器添加到元素。

例：

HTML

<div id="hide_me">
  I will hide if you click me
</div>

JS

document.getElementById('hide_me').addEventListener('click', function () {
  this.style.display = 'none';
});

小提琴： https : //jsfiddle.net/y1gc01zj/1

編輯您還可以添加一個CSS類：

CSS

.hide {
  display: none;
}

JS

document.getElementById('hide_me').addEventListener('click', function () {
    //  this.style.display = 'none';
  this.classList.add('hide')
});

Answer 2

可能您正在尋找：

 function sw(cl, v) { var a = document.getElementsByClassName(cl); for (var i=0; i<a.length; i++) a[i].style.visibility = v; }

 <p class="c1">c1</p> <p class="c2">c2</p> <p class="c1">c1</p> <button onclick="sw('c1', '');">show c1</button> <button onclick="sw('c1', 'hidden');">hide c1</button> <button onclick="sw('c2', '');">show c2</button> <button onclick="sw('c2', 'hidden');">hide c2</button>

Answer 3

您的問題是這種錯字：

在function hide_class() {

if(document.getElementsByClassName(".class")) {

應該

if(document.getElementsByClassName("class")) {

更改CSS上的HTML按鈕單擊？

問題描述

3 個解決方案

解決方案1
0 2017-01-04 21:12:43

解決方案2
0 2017-01-04 21:13:58

解決方案3
0 2017-01-04 21:15:59

更改CSS上的HTML按鈕單擊？

問題描述

3 個解決方案

解決方案1 0 2017-01-04 21:12:43

解決方案2 0 2017-01-04 21:13:58

解決方案3 0 2017-01-04 21:15:59

解決方案1
0 2017-01-04 21:12:43

解決方案2
0 2017-01-04 21:13:58

解決方案3
0 2017-01-04 21:15:59