Question

我的图片充当页面下方的按钮和文字。如何使用javascript和css进行设置，以便在单击图像时文本颜色会在下面更改？

<input type="image" id="theButton" src="https://cdn0.vox-
cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" 
style="height:50px" />

 <p>
text 1
</p>

<p>
text2
</p>

Answer 1

你可以试试这个：

使用addEventListener('click')将“点击”事件附加到按钮。然后相应的风格。

JSFiddle

<强> HTML

    <input type="image" src="https://cdn0.vox-
cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" id="theButton" style="height: 50px;"/>

<p>Text 1</p>

<p>Text 2</p>

<强> JS

document.querySelector('input').addEventListener('click', function(){
    document.querySelector('p').style.color='green';
})

Answer 2

最简单的选择是使用jQuery toggleClass。

jQuery

$("elementToBeClicked").on('click',function() { 
          $("elemenToBeAltered").toggleClass('classThatDefinesNewProperties');
        });

和css：

.classThatDefinesNewProperties {
  color:red; /* example change color to red*/
}

更多信息请访问：https://www.w3schools.com/jquery/html_toggleclass.asp

Answer 3

这个对我来说:(新鲜的es6东西）

＆＃13;

let theButton = document.getElementById('theButton');
let theText = document.querySelectorAll('.the-text');

theButton.onclick = function () { 
  for(let x of theText) {
    x.classList.toggle('colorized');
  }
};

＆＃13;

.the-text {
  color: blue;
}

.the-text.colorized {
  color: orange;
}

＆＃13;

<input type="image" id="theButton" src="https://cdn0.vox-
cdn.com/uploads/chorus_asset/file/4039958/ama-orange.0.png" 
style="height:50px" />
  
<p class="the-text">Hey look at me changing color on that image click!</p>
<p class="the-text">Hey more text</p>

＆＃13;

单击图像时更改文本上的CSS

3 个答案: