<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #box{

            height: 200px;

            width: 200px;

            color: white;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div style="text-align:center;" id="box">

        <span style="font-size:20px;" id="txt">测试样例哈</span>

    </div>

    <script>

        var box = document.getElementById("box");

        var txt = document.getElementById("txt");

        //1 .style.property 仅能获取内联样式 但可以修改样式

        console.log(box.style.textAlign);//center

        console.log(box.style.color);//空白

        // box.style.color = "black";//√

        //不可加！important

        //2 .style.cssText

        console.log(box.style.cssText);//text-align:center, 返回

        // txt.style.cssText = "color:red;";//注意，会覆盖之前的样式，包括在这里没有写到的，相当于清除了原本元素的样式

        //但是继承而来的样式不会被清除,如这里继承自box的居中对齐

        //可加！important，如用来覆盖继承的属性

        //3 .style.setProperty

        txt.style.setProperty("font-size","30px");//√

        //仅可用于部分常用属性

        //4 document.defaultView(window).getComputedStyle

        //IE则是currentStyle[attr]

        var declaration =  document.defaultView.getComputedStyle(box,null);

        var detailStyle =  document.defaultView.getComputedStyle(box,null).height;

        // var declaration =  document.defaultView.getComputedStyle(box,null)[height];//同理

        var windowDeclaration = window.getComputedStyle(box,null);

        console.log(declaration,windowDeclaration,detailStyle);

        //4.sp 封装一个具有兼容性的属性查阅函数

        function styleCheck (element,prop,state){

            if(document.defaultView.getComputedStyle(element,state)){

                result = document.defaultView.getComputedStyle(element,state)[prop];//不能.prop哈，记得

            }else{

                result = element.currentStyle.prop;

            }

            console.log("The value of property"+ prop + " is" + " " + result + ".");

            return result;

        }

        styleCheck(box,"height");

        //5. 对样式表下手 insertRule 与 addRule

        // var changedStyleSheet = document.styleSheet[0].insertRule("#box","height","400px"); 插入新规则

    </script>

</body>

</html>

JavaScript获取、修改CSS样式合辑的更多相关文章

  1. javascript 动态修改css样式方法汇总(四种方法)

    在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. ...

  2. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  3. 获取 修改 CSS 样式

    内联(style里的)样式 element.style.color element.style.getPropertyValue("color")   非内联样式 window.g ...

  4. javascript 动态修改css样式

    方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2"; //或者 obj.setAttr ...

  5. JS笔记一：动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  6. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  7. ASP.NET中直接用C# 动态修改CSS样式

    ASP.NET中直接用C# 动态修改CSS样式  wonsoft (wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个B ...

  8. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

随机推荐

  1. C++ 跨语言调用 Java

    C++ 跨语言调用 Java Java JDK 提供了 JNI 接口供 C/C++ 程序调用 Java 编译后的类与方法,主要依赖于头文件(jni.h) 和 动态库(jvm.so/jvm.dll),由 ...

  2. JAVA高级篇(二、JVM内存模型、内存管理之第一篇)

    JVM内存结构如 Java堆(Heap),是Java虚拟机所管理的内存中最大的一块.Java堆是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例,几乎所有的对象实 ...

  3. Python全栈之路----函数----内置方法

    Built-in Functions abs() dict() help() min() setattr() all() dir() hex() next() slice() any() divmod ...

  4. 基于VM上的Ubuntu16.04如何和window界面进行复制,粘贴工作

    1.卸载VMware tools: sudo apt-get autoremove open-vm-tools 2.安装界面版VMware tools. sudo apt-get install op ...

  5. matplotlib.pyplot展示MNIST图片

    import torch import torch.utils.data as Data import torchvision import torchvision.transforms as tra ...

  6. 面向对象的编程思想和Java中类的概念与设计

    面向对象的编程思想学习,面向对象内容的三条主线;1.java类及类的对象2.面向对象的三大特征3.其他关键字学习内容:3.1面向对象与面向过程面向对象与面向过程在应用上的区别 Java中类的概念与设计 ...

  7. 如何安装miniconda（python虚拟环境）

    anaconda是用于科学计算的python发行版本(可用于python虚拟环境的管理),miniconda是简化版的anaconda 1.下载安装miniconda 下载miniconda 因为An ...

  8. java web(七): mybatis的动态sql和mybatis generator自动生成pojo类和映射文件

    前言: MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架的经验,你就能体会到根据 不同条件拼接 SQL 语句的痛苦.例如拼接时要确保不能忘记添加必要的空格,还 ...

  9. 如何在Python中使用ZeroMQ和Docker构建微服务架构

    @Container容器技术大会将于6月4日在上海光大会展中心国际大酒店举办,来自携程.PPTV.蚂蚁金服.京东.浙江移动.海尔电器.唯品会.eBay.道富银行.麻袋理财等公司的技术负责人将带来实践经 ...

  10. java_lambda表达式

    lambda表达式1    由来    概念        是通过策略模式来曲线实现的    lambda表达式2    语法详解    lambda表达式3    目标类型的概念    目标类型推断 ...