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

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获取和修改元素样式的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js获取元素样式
javascript经典实例、javascript项目实例、javascript实例、javascript实例精通、javascript实例教程,以便于您获取更多的相关知识。

时间: 2024-10-31 10:39:28

JS获取和修改元素样式的实例代码_javascript技巧的相关文章

基于JS实现新闻列表无缝向上滚动实例代码_javascript技巧

当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

用原生JS对AJAX做简单封装的实例代码_javascript技巧

首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

js控制li的隐藏和显示实例代码_javascript技巧

html页面 <div class="favorite_list"> <div class="list_type" id="list_type"> <ul class="all"> <li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class=

js获取新浪天气接口的实现代码_javascript技巧

js获取新浪天气接口的实现代码 <!doctype html> <html class="no-js fixed-layout"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>天气</title> </

Js获取图片原始宽高的实现代码_javascript技巧

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

Javascript获取CSS伪元素属性的实现代码_javascript技巧

CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签.有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到: 看看下面的CSS代码: .element:before { content: 'NEW'; color: rgb(255, 0, 0); }.element:before { content: 'NEW'; color: rgb(255, 0, 0); } 为了获取到.element

JS获取月的最后一天与JS得到一个月份最大天数的实例代码_javascript技巧

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script language="javascript"> function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天,方便计

JS中frameset框架弹出层实例代码_javascript技巧

前段时间做项目,有个功能是消息提醒. 我相信很多大牛都做过.下面来分享我遇到的问题和解决方案. 首先我们的项目是用frameset框架,main代码. <frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0"> <frame src="${base}/left.jsp&quo

js仿百度贴吧验证码特效实例代码_javascript技巧

今天看到有百度验证码挺有意思的,就把它仿下来了. 利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对.然后提示[答案正确!]或[答案错误!], 以后有空再去做成程序,先分享给大家! 效果图如下: 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran