• 技术文章 >web前端 >js教程

    js如何添加css样式

    藏色散人藏色散人2021-06-08 14:56:04原创126

    js添加css样式的方法:1、通过调用元素的css方法来添加样式;2、通过addClass来添加css样式,语句如“$("#txtName").addClass("aa");”。

    本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    js如何添加css样式?

    添加css样式方法汇总

    由于jquery支持css3,所有能很好的兼容很多浏览器,

    所以通过jquery来使用css样式比较好。

    为定义好的css样式可以调用元素的css方法添加样式

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

    如果是定义好的css样式,可以通过addClass来添加,比如

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

    下面列举下对css样式操作的方法:

    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"}):可以多次添加样式

    判断display隐藏显示

       // 判断是否为隐藏(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;
        }

    推荐:《javascript高级教程

    以上就是js如何添加css样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:js
    上一篇:jquery中html()方法怎么用 下一篇:浅谈Angular中的Component/Service
    第16期线上培训班

    相关文章推荐

    • 浅谈浏览器中本地运行Node.js的方法• 在js中写html代码怎么写• 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的• html如何调用js函数• js怎么替换html标签

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网