JS获取和修改元素样式的实例代码

1、获取元素样式：

可以通过元素的style属性，获取元素行内样式。style属性是一个对象，包括一系列样式属性。例如：color, backgourdColor。

上面讲的通过style属性获取元素样式，不推荐使用。

下面的一段代码，可以获取元素运行时的样式，即全局的样式。这种方式可以动态获取元素的样式，例如元素大小。

// node：将要获取其计算样式的元素节点
// attr: 样式属性名称
function getCurrentStyle(node, attr) {
  var style = null;
  //dom标准方式
  if(window.getComputedStyle) {
    style = window.getComputedStyle(node, null);
  }
  else{
    style = node.currentStyle; //ie方式
  }

  return style[attr];
}

2、修改元素样式

直接通过元素的style属性，例如： p.style.backgroundColor = "red"

注意：当通过上面方法获取或修改元素样式时，属性名称和定义的元素属性名称有区别。例如：通过css的background-color定义背景色，那么在js中获取或修改这个样式属性时需要将‘-' 符号后的首字母转换成大小。

以上这篇JS获取和修改元素样式的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生javascript获取元素样式

    摘要:     我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style     在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获

  • javascript克隆元素样式的实现代码

    复制代码 代码如下: /** * 克隆元素样式 * @param {HTMLElement} 被克隆的元素 * @param {Boolean} 是否启用缓存(默认true) * @return {String} css类名 */ var cloneStyle = (function (doc) { var rstyle = /^(number|string)$/, cloneName = '${cloneName}', sData = {}, addHeadStyle = function (

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用

  • 原生javascript获取元素样式属性值的方法

    所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

  • JS如何设置元素样式的方法示例

    JS如何设置元素样式的方法示例

    一看到这个标题,大家可能首先想到的就是使用"[元素].style.[CSS属性名] = [属性值]"这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择. 接下来,我将详细介绍三种设置元素样式的方式. 一.style 这个其实就是我们所熟知的方式,举个例子~~ <div id="box"></div> var box = document.getElementById("box"); box.style.wid

  • JavaScript修改css样式style动态改变元素样式

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

  • js正确获取元素样式详解

    在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM

  • 利用原生JavaScript获取元素样式只是获取而已

    ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color; //获取颜色 2.wi

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • 原生JS实现获取及修改CSS样式的方法

    本文实例讲述了原生JS实现获取及修改CSS样式的方法.分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一.行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

  • JS获取浮动(float)元素的style.left值为空的快速解决办法

    解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLe

  • js获取文件里面的所有文件名(实例)

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • js获取css的各种样式并且设置他们的方法

    js获取css的各种样式并且设置他们的方法

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute

  • js 获取站点应用名的简单实例

    一直用EL表达式${pageContext.request.contextPath}来传递应用名,在用到JS中时,很麻烦,虽然也可以用,但是加大了代码复杂度,因此这里推荐用JS获取应用名 function getContextPath() { var contextPath = document.location.pathname; var index =contextPath.substr(1).indexOf("/"); //这个地方可能有问题,要根据具体项目适当修改 contex

  • js获取及修改网页背景色和字体色的方法

    本文实例讲述了js获取及修改网页背景色和字体色的方法.分享给大家供大家参考,具体如下: 获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : 代码如下: 复制代码 代码如下: var rgb = document.getElementById('color').style.backgroundColor; 得到格式如下: rgb(225, 22, 23); 然后进行拆分: 代码如下

  • 关于React动态修改元素样式的三种方式

    关于React动态修改元素样式的三种方式

    目录 React动态修改元素样式 1.借助ref动态修改样式 2.通过动态控制状态的变化修改元素的样式(两种方式) 3.通过在DOM中使用JS代码(三元运算符) React样式冲突问题 css-样式私有化 cssModules-维持类名 css modules-最佳实践 React动态修改元素样式 React动态修改元素样式常用的方式有两种:借助ref和通过动态控制状态的变化修改元素的样式 1.借助ref动态修改样式 在需要修改样式的元素上添加ref <div className='scroll

  • 修改 bootstrap table 默认detailRow样式的实例代码

    废话不多说了,直接给大家贴代码,具体代码如下所示: this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () { var $this = $(this), //a.detail-icon $tr = $this.parent().parent(), //current row index = $tr.data('index'), row = data[index

  • JS获取字符对应的ASCII码实例

    有时候会需要用到字符的ASCII码,一时之间调试时可能会忘记字符与ASCII码对应的数字. 最近喜欢用浏览器控制台直接跑JS代码,将这个代码直接贴到浏览器控制台,即可调试(谷歌浏览器快捷键 ctrl+shift+j) function GetAsciiCode(){ var str = prompt("请输入几个字符","");//接收字符串 var strAscii = new Array();//用于接收ASCII码 for(var i = 0 ; i <

随机推荐