How to add css style to js-JS Tutorial-php.cn

How to add css style to js

藏色散人

Release： 2023-01-06 11:16:49

Original

13248 people have browsed it

How to add css style in js: 1. Add the style by calling the css method of the element; 2. Add the css style by addClass, with statements such as "$("#txtName").addClass("aa" );".

How to add css style to js

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to add css style to js?

Summary of methods to add css style

Since jquery supports css3, it can be well compatible with many browsers.

So it is better to use css styles through jquery.

For the defined css style, you can call the css method of the element to add the style

$("span").css("css属性名","属性值")
如：
$("span").css("color","red") 将标签为span的字体都设为红色的

Copy after login

If it is a defined css style, you can add it through addClass, such as

  <style type="text/css">
       .aa {border:1px solid red;}
  </style>
  <input id="txtName" type="text" value="请输入你的姓名"/>
  
  <script>
  $("#txtName").addClass("aa");
  </script>

Copy after login

below List the methods for operating css styles:

1、.css("样式")：获得样式值，比如$("input").css("color")  获得input中字体的颜色
2、.css("样式","value"):为样式赋值，如$("input").css("color","red");
3、.addClass("样式类1,样式类2,样式类3"):可以添加多个定义好的样式类
4、.hasClass("样式类类")：判断是否存在该样式
5、.toggleClass("样式类")：如果存在(不存在)就切换(删除)样式
6、.toggleClass("样式类",swith):如果swith为false，则删除样式，如果swith为true，则切换成该类
7、.removeClass("样式类")：移除样式类
8、.css({样式名:"value",样式名:"value",样式名:"value"}):可以多次添加样式

Copy after login

Judge display to hide and show

   // 判断是否为隐藏(css)样式
    function isHide(obj) {
    var ret = obj.style.display === "none" ||
    obj.style.display === "" ||
    (obj.currentStyle && obj.currentStyle === "none") ||
    (window.getComputedStyle && window.getComputedStyle(obj, null).display === "none")
   
    return ret;
    }

Copy after login

Recommended: "javascript Advanced Tutorial"

The above is the detailed content of How to add css style to js. For more information, please follow other related articles on the PHP Chinese website!