it-swarm.com.de

Ändern Sie die CSS-Eigenschaften beim Klicken

Ich versuche, die CSS eines Elements beim Klicken auf ein anderes Element zu ändern. Ich habe viel gesucht, aber nichts funktioniert perfekt. Momentan verwende ich den folgenden Code, aber er funktioniert nicht. Kann mir jemand sagen, was ich vermisst habe?

<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';
}
27
mobi001

Erstens mit on* Attribute zum Hinzufügen von Ereignishandlern sind eine sehr veraltete Methode, um die gewünschten Ergebnisse zu erzielen. Nachdem Sie Ihre Frage mit jQuery markiert haben, folgt eine jQuery-Implementierung:

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

Eine effizientere Methode besteht darin, diese Stile in eine Klasse einzufügen und diese Klasse dann mit einem Klick wie folgt hinzuzufügen:

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

Versuche dies:

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");
}
15
ATOzTOA
    <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>
6
Kirandeep Singh

In deinem Code benutzt du kein jquery, also wenn du es benutzen willst, brauchst du so etwas wie ...

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

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

Wenn Sie jquery nicht verwenden, müssen Sie Folgendes tun ...

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

Mit jquery können Sie es wie folgt machen:

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

dies gilt für alle img Tags, für die Sie ein id Attribut setzen sollten, wie image und dann:

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

Dieser Code scheint gut zu funktionieren (siehe dies jsfiddle ). Ist dein Javascript definiert vorher dein Körper? Wenn der Browser onclick="myFunction()" liest, muss er wissen, was myFunction ist.

0
rmhartog
<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'
  });
});
0
Matei Mihai

Versuche dies:

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