I am trying to change the CSS of one element on click of another element. I've searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn't work. Can anyone tell me what I missed?
<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';
}
This question is related to
javascript
jquery
css
jquery-ui
onclick
Try this:
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");
}
Try this:
$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
This code seems to work fine (see this jsfiddle). Is your javascript defined before your body?
When the browser reads onclick="myFunction()" it has to know what myFunction is.
<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />
JS
$('#click_me').click(function(){
$('#foo').css({
'background-color':'red',
'color':'white',
'font-size':'44px'
});
});
With jquery you can do it like:
$('img').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
this applies for all img tags you should set an id attribute for it like image and then:
$('#image').click(function(){
$('#foo').css('background-color', 'red').css('color', 'white');
});
In your code you aren't using jquery, so, if you want to use it, yo need something like...
$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});
Other way, if you are not using jquery, you need to do ...
document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
<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>
Source: Stackoverflow.com