communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Manipulation du style CSS jQuery

opération de style CSS

  • $().css(name, value);

  • $().css(name); //Obtenir

  • $().css(json object); en même temps Style

fonctionnalités d'opération de style css() : ① Acquisition de style, jquery peut obtenir styles en ligne, intérieurs et extérieurs.
La méthode dom ne peut obtenir que des styles en ligne
② Les styles d'attributs composites doivent être divisés en "styles spécifiques" avant de pouvoir être utilisés
Par exemple : l'arrière-plan doit être divisé en background-color background-image , etc. pour l'opération
border: border-left-style border-left-width border-left-color etc.
margin: margin-left margin-top etc. 

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
           function f1(){
                alert($('div').css('background-color'));
           }
           function f2(){
            $('div').css('background-color','red')
           }
           function f3(){
                var jn={'width':'300px','height':'300px'};
                $('div').css(jn);
           }
        </script>
    </head>
    <body>
        <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div>
        <input type="button" value="获取背景色" onclick="f1()" />
        <input type="button" value="设置背景色" onclick="f2()" /> 
        <input type="button" value="批量设置" onclick="f3()" /> 
    </body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ alert($('div').css('background-color')); } function f2(){ $('div').css('background-color','red') } function f3(){ var jn={'width':'300px','height':'300px'}; $('div').css(jn); } </script> </head> <body> <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div> <input type="button" value="获取背景色" onclick="f1()" /> <input type="button" value="设置背景色" onclick="f2()" /> <input type="button" value="批量设置" onclick="f3()" /> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492695 joue