mob*_*001 29 javascript css jquery jquery-ui onclick
我试图在点击另一个元素时更改一个元素的CSS.我经常搜索,但没有任何效果.目前我使用下面的代码,但它不起作用.谁能告诉我我错过了什么？
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
function myFunction() {
document.getElementById('foo').style.cssText = 'background-color: red; color: white; font-size: 44px';
}
Ror*_*san 27
首先,使用on*属性添加事件处理程序是实现所需内容的一种非常过时的方式.正如您使用jQuery标记了您的问题,这是一个jQuery实现:
<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />
$('#image').click(function() {
$('#foo').css({
'background-color': 'red',
'color': 'white',
'font-size': '44px'
});
});
一种更有效的方法是将这些样式放入一个类中,然后添加该类onclick,如下所示:
$('#image').click(function() {
$('#foo').addClass('myClass');
});.myClass {
background-color: red;
color: white;
font-size: 44px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />ATO*_*TOA 16
试试这个:
CSS
.style1{
background-color:red;
color:white;
font-size:44px;
}
HTML
<div id="foo">hello world!</div>
<img src="zoom.png" onclick="myFunction()" />
使用Javascript
function myFunction()
{
document.getElementById('foo').setAttribute("class", "style1");
}
小智 6
<script>
function change_css(){
document.getElementById('result').style.cssText = 'padding:20px; background-color:#b2b2ff; color:#0c0800; border:1px solid #0c0800; font-size:22px;';
}
</script>
</head>
<body>
<center>
<div id="error"></div>
<center>
<div id="result"><h2> Javascript Example On click Change Css style</h2></div>
<button onclick="change_css();">Check</button><br />
</center>
</center>
</body>
| 归档时间： |
|
| 查看次数： |
193267 次 |
| 最近记录： |