更改HTML按鈕點擊CSS？

我想在用戶點擊一個按鈕時修改頁面的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() ] 
    } 
]); 
}); 
});

來源

2017-01-04 Nat

你想添加監聽或改變風格？ –

我想在點擊按鈕時改變樣式，但我相信我需要實現監聽器來改變樣式，除非有人對如何實現這一點有更好的想法。 – Nat

偵聽器偵聽到更改，但不會啓動更改 –

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

實施例：

HTML

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

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

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

編輯你還可以添加CSS類：

CSS

.hide { 
    display: none; 
}

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

來源

2017-01-04 21:12:43 Baruch

這與我試圖實現的接近，但是如何建議在按鈕單擊時觸發此腳本（content.js）（ popup.html）？ – Nat

也許您正在尋找這樣的：

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>

來源

2017-01-04 21:13:58

你的問題是，這個錯字：

在function hide_class() {

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

應該

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

來源

2017-01-04 21:15:59 mike510a

更改HTML按鈕點擊CSS？

回答

相關問題