原生js获取、添加、修改菜鸟知识非行间css样式_样式基础指南

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。html如下:
#box{ width:300px; height:100px; background:#ff0; border:1px solid #

原生js获取、添加、修改菜鸟知识非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

原生js获取、添加、修改菜鸟知识非行间css样式_样式基础指南

html如下:

<style>
#box{ width:300px; height:100px; background:#ff0; border:1px solid #0076FF;}
</style>
<div id="box"></div>

我们如何通过js获取box节点的高和border值呢?定义一个getStyle的方法,代码如下:

<script type="text/javascript">
//获取非行间css样式
function getStyle(obj,attr){    //获取非行间样式,obj是对象,attr是值
    if(obj.currentStyle){   //针对ie获取非行间样式
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];   //针对非ie
    };
};
//使用
var b=document.getElementById('box');
console.log(getStyle(b,"height"));//获取元素的高100px
console.log(getStyle(b,"border"));//获取元素的boder显示为:1px solid rgb(0, 118, 255)
</script>

这里的getStyle只能获取,如果需要添加或者修改非行间css样式呢,这里定义一个方法,代码如下:

<script type="text/javascript">
//为获取/添加css样式
function css(obj,attr,value){   //对象,样式,值。传2个参数的时候为获取样式,3个是设置样式
    if(arguments.length == 2){  //arguments参数数组,当参数数组长度为2时表示获取css样式
        return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数
    }else{
        if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值
            obj.style[attr] = value;
        };
    };
};
//使用
var b=document.getElementById('box');
css(b,"background","#f0f");//把box的背景替换为#f0f
console.log(css(b,"border"));//获取元素的boder显示为:1px solid rgb(0, 118, 255)
</script>
海计划公众号
(0)
上一篇 2020/04/05 01:50
下一篇 2020/04/05 01:49

您可能感兴趣的内容

  • Ant Design基础入门教程_是一个致力于提升『用户』和『设计者』使用体验的中台设计语言

    Ant Design基础入门 官方网址:http://ant.design/ GitHub:https://github.com/ant-design/ant-design 简介描…

    2020/03/05
  • 推荐好用的python网站开发框架小白攻略_框架小白知识

    python作为解释型脚本语言,是一种通用的编程语言。由于python社区拥有大量的库文件、框架和其他的一些实用工具,我们可以用python完成各种各样的任务。另外,由于python的代码构成和结构就像英语句子一样自然,这种语言的学习曲线也比较平缓。因此和其他语言相比,好多网站开发人员更喜欢用python来确保代码的可读性。然而,python一开始被设计出来

    2020/03/29
  • 发布订阅和观察者模式的区别基础知识教程_模式基础指南

    发布订阅和观察者模式的区别基础知识教程 有些人认为观察者模式就是发布订阅模式,实际上观察者模式是包含了订阅发布模式,发布订阅模式只是观察者模式中的一种。观察者模式是观察者和被观察者…

    2020/03/19
  • 风火云短信验证码接收平台, 接码快速,平台稳定,简单易学菜鸟指南_验证小白知识

    目前的社会发展得非常快,互联网产业的发展更是让很多人惊奇,平台越来越多也导致了搭载程序的要求必须高,服务平台完善性还体现于短信验证码是否具备,只有在具备的前提下才能有着更大的保证,现在平台安全技术手段也不断在升级,安全重要表现也在于短信验证码,但目前很多的平台都不知如何构建短信验证码。短信验证码创建要找对合适的平台,像风火云短信验证码接收平台就是首选,被誉为

    2020/04/03
  • Link 标签的预加载机制新手入门_预加载基础指南

    先简单介绍下 link 标签作用你可以在页面 元素内部使用 标签书写一些声明式的资源获取请求 preload (预加载)有些资源是在页面加载完成后即刻需要的,对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。 这一机制使得资源可以更早的得到加载并可用,且更不易阻塞

    2020/03/29
  • 想要成为一个优秀的WEB前端工程,到底该怎么做呢?新手入门_前端使用说明

    互联网已成为当下最火热的行业,互联网的发展带来了巨大的社会变革,从工作到生活,改变着方方面面。 随着互联网的快速发展,IT技术人才缺口开始出现并不断扩大。WEB前端开发工程师作为IT领域中的最热门岗位之一,对人才的需求量更加惊人。想要成为一个优秀的WEB前端工程,到底该怎么做呢?必要因素学成WEB前端的必要因素,一样都不可以少: 1.自主学习的能力,自

    2020/03/23
  • js判断数据类型指南教程_类型小白知识

    javaScript中的数据类型ECMAScript 变量包含两种不同的数据类型的值:基本类型值和引用类型值 。 基本数据类型指的是简单的数据段,而引用数据类型指那些可能有多个值组成的对基本类型(值类型)Undefined 在使用var声明变量但未对其初始化时,或者使用了一个并未声明的变量时,又或者使用了一个并不存在的对象属性时,这个变量的值就是undefi

    2020/03/26
  • Typescript内置类型与自定义类型基础教程_类型小白知识

    背景大家用过 Typescript 都清楚,很多时候我们需要提前声明一个类型,再将类型赋予变量。例如在业务中,我们需要渲染一个表格,往往需要定义:interface Row {user: stringemail: stringid: numbervip: boolean// …
    }const tableDatas: Row[] = []
    // …有时

    2020/03/30
  • JS中设置cookie,读取cookie,删除cookie小白攻略_cookie入门基础教程

    1.什么是cookie?Cookie 是在您的计算机上存储在小的文本文件中的数据。当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。Cookie 是为了解决“如何记住用户信息”而发明的:当用户访问网页时,他的名字可以存储在 cookie 中。下次用户访问该页面时,cookie 会“记住”他的名字。Cookie 保存在名称值(name-

    2020/03/29
  • Js中parseInt()和Number()之间有什么区别?使用说明_区别教程视频

    Number()和parseInt()都可以用来进行数字的转换,那么parseInt()和Number()之间的区别是什么?parseInt()函数:parseInt()函数用于解析字符串并将其转换为指定基数的整数。它需要两个参数,要解析的字符串和要使用的基数。基数是一个介于2和36之间的整数,表示数字的基数。如果parseInt()在解析过程中遇到不符合指

    2020/03/20
  • 前端模块化:CommonJS,AMD,CMD,ES6小白常识_模块化入门教程

    模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。一、CommonJSNode.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的

    2020/03/20
  • TypeBoost小白常识_专注于写作的书写工具

    TypeBoost小白常识 官方网址:https://www.typeboost.io/ 简介描述:专注于写作的书写工具 TypeBoost是一款网络版的书写工具,其特点在于当你输…

    2020/03/11
  • Js命令模式入门指南_模式基础知识入门

    命令模式:请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。生活小栗子:客户下单,订单记录了客户购买的产品,仓库根据订单给客户备货。模式特点命令模式由三种角色构成:发布者 invoker(发出命令,调用命令对象,不知道如何执行与谁执行);接收者 receiver (提供对应接口处理

    2020/03/29
  • JavaScript函数式编程指南攻略_编程指南教程

    1:基本概念函数式编程是一种编程思维方式,并不是一些语法规则,对于复用性高的功能代码进行一定的函数封装,实现了代码的高可复用性(主要目的)。函数式编程的特点:函数是第一等公民,因为叫函数式编程,因此函数的地位是最高的,也就是说比起变量函数的地位更高一点。只用表达式而不用语句,表达式就是声明式的意思,语句就是命令式的,尽量使用表达式或者是声明式的代码来组织逻辑

    2020/03/26
  • 跳出 forEach小白入门_循环入门攻略

    使用for…in遍历对象时,会遍历原型链上的可枚举属性,这可能会导致一些意想不到的问题。所以你一定收到过这样的建议,使用数组的forEach来代替for…in循环。一、常规试错在使用for…in的时候,在适当的时机终止循环是很常用的功能。那么问题来了,当我们有此需求时,我们可能会像下面这么做。或许我们会尝试如下代码: [1, 2, 3, 4, 5

    2020/04/03
  • linux搭建ftp服务器入门基础知识_linux小白教程

    1.运行以下命令安装 vsftpdyum install -y vsftpd2.查看vsftpd文件夹ls /etc/vsftpd/
    ftpusers user_list vsftpd.conf vsftpd_conf_migrate.sh说明:/etc/vsftpd/vsftpd.conf 是核心配置文件。/etc/vsftpd/ftpusers 是

    2020/03/23