在点击更改CSS属性(Change CSS properties on click)

我试图改变一个元素的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';
}

Answer 1:

首先，使用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" />

Answer 2:

试试这个：

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

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

Answer 4:

使用jQuery，你可以不喜欢它：

$('img').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});

这适用于所有img标签应该设置一个id属性，它像image ，然后：

$('#image').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});

Answer 5:

在你的代码没有使用jQuery的，所以，如果你想使用它，哟需要像...

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

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

另一种方式，如果你不使用jQuery，你需要做的...

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

Answer 6:

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

Answer 7:

试试这个：

$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});

Answer 8:

此代码似乎正常工作（见本的jsfiddle ）。是你的JavaScript你的身体之前定义的？当浏览器读取onclick="myFunction()"它必须知道什么myFunction是。

文章来源: Change CSS properties on click