Change CSS properties on click

后端未结

关注

 8  2286

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

相关标签:

8条回答

栀梦

2020-11-29 23:36
Try this:
```
$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2020-11-29 23:42

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

0 讨论(0)

别那么骄傲

2020-11-29 23:45

<div id="foo">hello world!</div>
<img src="zoom.png" id="click_me" />

$('#click_me').click(function(){
  $('#foo').css({
    'background-color':'red',
    'color':'white',
    'font-size':'44px'
  });
});

0 讨论(0)

攒了一身酷

2020-11-29 23:46

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

0 讨论(0)

逝去的感伤

2020-11-29 23:48

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

0 讨论(0)

死守一世寂寞

2020-11-29 23:51

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

0 讨论(0)

1 2 下一页