Modifier les propriétés CSS sur cliquez sur

Je suis en train de modifier le CSS d'un élément sur un autre élément. J'ai beaucoup cherché mais rien ne fonctionne parfaitement. Actuellement, je suis en utilisant le code ci-dessous, mais il ne fonctionne pas. Quelqu'un peut-il me dire ce que j'ai raté?

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

Pourquoi n'êtes-vous pas simplement définir une nouvelle classe et avons les styles dans une feuille de style?
Quel navigateur êtes-vous tester dans les? Existe-il des erreurs dans le JS console?
Utiliser jQuery :), il est plus facile
je suis d'essayer sur le violon, juste pour lancer ce script simple
je pense trop.. pouvez-vous me guider tout lien s'il vous plaît

InformationsquelleAutor mobi001 | 2013-01-14

27

Tout d'abord, à l'aide de on* attributs à ajouter des gestionnaires d'événements est un très désuet façon de réaliser ce que vous voulez. Comme vous l'avez étiqueté à votre question avec jQuery, voici un jQuery mise en œuvre:
```
<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'
    });
});
```
La méthode la plus efficace est de mettre ces styles dans une classe, puis ajouter la classe onclick, comme ceci:

JS:
```
$('#image').click(function() {
  $('#foo').addClass('myClass');
});
```
CSS:
```
.myClass {
  background-color: red;
  color: white;
  font-size: 44px;
}
```
HTML:
```
<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" />
```
- il n'y a pas de raison que cela ne fonctionne pas dans Firefox. Si vous avez un problème, je vous suggère d'ouvrir une nouvelle question.
- lol 9 mois plus tard. merci pour la mise à jour.
- lol je viens de recevoir une notification à propos de cette question, et revint à elle - je ne savais pas la date de votre commentaire, désolé!
- Cette réponse utilise jQuery, mais la question a été à l'aide de la plaine de Javascript. C'est probablement pourquoi c'est aussi déroutant certaines personnes qui essaient de l'utiliser.
- L'OP tagged jQuery dans la question, et j'ai déclaré que c'est un jQuery mise en œuvre d'une solution. Qui exactement a été confondue par elle? Je ne vois pas de commentaires demandant des éclaircissements?
- Cela ne veut pas répondre à l'OP de la question de savoir pourquoi leur code ne fonctionne pas.
- C'est parce que il n'y a pas assez d'informations dans le po pour diagnostiquer un problème. L'exemple de l'OP donne fonctionne absolument fine (jsfiddle.net/k9rL517m). Ma première hypothèse est que le myFunction() n'est pas déclaré dans le champ d'application de la onclick attribut event, c'est à dire. pas dans le window, mais qui ne serait qu'une hypothèse
InformationsquelleAutor Rory McCrossan

Essayez ceci:

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

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

C'est la meilleure et la plus simple de répondre

InformationsquelleAutor Kirandeep Singh

Avec jquery, vous pouvez le faire comme:

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

cela s'applique pour tous les img balises, vous devez définir un id attribut, comme image et puis:

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

InformationsquelleAutor Mustafa Shujaie

1

Dans votre code, vous n'êtes pas à l'aide de jquery, donc, si vous voulez l'utiliser, yo besoin de quelque chose comme...
```
$('#foo').css({'background-color' : 'red', 'color' : 'white', 'font-size' : '44px'});
```
http://api.jquery.com/css/

Autre façon, si vous n'êtes pas à l'aide de jquery, vous devez faire ...
```
document.getElementById('foo').style = 'background-color: red; color: white; font-size: 44px';
```
InformationsquelleAutor Elwi

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

InformationsquelleAutor Matei Mihai

Essayez ceci:

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

InformationsquelleAutor Barry Kaye

0

Ce code semble fonctionner correctement (voir ce jsfiddle). Votre javascript est défini avant votre corps?
Lorsque le navigateur lit onclick="myFunction()" il doit savoir ce que myFunction est.

InformationsquelleAutor rmhartog

Vous devez vous connecter pour publier un commentaire.