HTMLボタンのクリックでCSSを変更しますか？

ユーザーがボタンをクリックすると、ページのCSSを変更したい（特定のクラスの要素を隠す、 "クラス"）。私はこのボタンがスタイルの変更をトリガするための正しい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

EDIT は、あなたはまた、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を変更しますか？

答えて

関連する問題