37

別の要素をクリックすると、ある要素の 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';
}
4

8 に答える 8

37

まず、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" />

必要な人のために、上記の単純な Javascript 実装を次に示します。

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

于 2013-01-14T13:28:46.570 に答える
18

これを試して：

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");
}
于 2013-01-14T13:31:31.793 に答える
7 
    <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>
于 2015-10-05T09:27:00.303 に答える
2

コードでは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';
于 2013-01-14T13:33:42.440 に答える
1

jquery を使用すると、次のように実行できます。

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

これは、次のように属性をimg設定する必要があるすべてのタグに適用されます。idimage

$('#image').click(function(){
    $('#foo').css('background-color', 'red').css('color', 'white');
});
于 2013-01-14T13:29:15.443 に答える
0 
<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'
  });
});
于 2013-01-14T13:29:02.573 に答える
0

これを試して：

$('#foo').css({backgroundColor:'red', color:'white',fontSize:'44px'});
于 2013-01-14T13:29:53.610 に答える
0

このコードは正常に動作するようです (このjsfiddleを参照)。あなたのJavaScriptはあなたの体の前に定義されていますか? ブラウザが読み取るとき、何がonclick="myFunction()"何であるかを知る必要myFunctionがあります。

于 2013-01-14T13:35:42.757 に答える