Change CSS properties on click

javascript jquery css jquery-ui onclick

291,295

Solution 1

Firstly, using on* attributes to add event handlers is a very outdated way of achieving what you want. As you've tagged your question with jQuery, here's a jQuery implementation:

<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'
    });
});

A more efficient method is to put those styles into a class, and then add that class onclick, like this:

$('#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" />

Here's a plain Javascript implementation of the above for those who require it:

document.querySelector('#image').addEventListener('click', () => {
  document.querySelector('#foo').classList.add('myClass');
});

.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}

<div id="foo">hello world!</div>
<img src="https://i.imgur.com/9zbkKVz.png?1" id="image" />

Solution 2

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");
}

Solution 3

    <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>

Solution 4

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'});

http://api.jquery.com/css/

Other way, if you are not using jquery, you need to do ...

document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';

Solution 5

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');
});

View more solutions

291,295

Author by

mobi001

Web Designer | Web Developer | Joomla Specialist | Front End Engr

Updated on January 01, 2021

Comments

mobi001 over 3 years
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';
}
```
orrd over 8 years

This answer uses jQuery, but the question was using plain Javascript. That's probably why it's also confusing some people who try to use it.
Rory McCrossan over 8 years

@orrd The OP tagged jQuery in the question, and I stated that this is a jQuery implementation of a solution. Who exactly has been confused by it? I see no comments asking for any clarification?
RobG almost 7 years

This doesn't answer the OP's question of why their code doesn't work.
Rory McCrossan almost 7 years

@RobG That's because there isn't enough information in the OP to diagnose a problem. The example the OP gives works absolutely fine (jsfiddle.net/k9rL517m). My first assumption is that the myFunction() is not declared in scope of the onclick event attribute, ie. not within the window, but that would only be an assumption
Sonevol almost 7 years

This is best and most simple answer
Rigin Oommen over 3 years

A javascript code can be better than jquery