js操作元素的样式

1.元素.style.属性=‘属性值‘

var div=document.getElementById(‘box‘)
div.style.width=‘300px‘;
div.style.height=‘300px‘;
div.style.backgroundColor=‘red‘;   //css中有-的属性,在js中要改成驼峰命名法

2.div.style.属性     获取元素的样式

var div=document.getElementById(‘box‘)
console.log(div.style.width);
console.log(div.style.height);
console.log(div.style.backgroundColor);   //如果要通过style获取样式,只能获取行内样式

3.通过操作类,改变元素的样式

var div=document.getElementById(‘box‘)
div.className += ‘ one‘    //一定要记得+空格

原文地址:https://www.cnblogs.com/zhaodz/p/11617779.html

时间: 2024-10-12 03:32:58

js操作元素的样式的相关文章

js操作元素样式

样式表有外部样式表.内部样式表.行内样式. js改变css样式也是有三种.针对于外部样式表如果不采用后台技术,只是单纯的用js是不能实现的.所以下面只讨论两个方法. 一.js改变内部样式 其操作方法和一般标签一样,给style标签加一个类名或id,然后js中获取该元素,向里面添加内容即可改变样式. 示例: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UT

JS操作属性、样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个dom对象的属性名中的属性值 aaa.removeAttribute("属性名"); -移除该属性 aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,执行一遍window.setInterval('aaa

JS操作属性和样式

JS操作属性:aaa.getAttribute("属性名"); - 取出aaa这个DOM对象的属性名中的属性值aaa.removeAttribute("属性名"); -移除该属性aaa.setAttribute("属性名","值"); --添加/修改此属性 window.setTimeout("b()", 3000); --等待3秒,执行b这个方法,只执行一遍.window.setInterval('aaa

js操作元素className

Base.prototype.addClass = function (className) { for (var i = 0; i < this.elements.length; i ++) { if (!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))){ this.elements[i].className += ' ' + className; } } return this;

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="Content-

js操作元素透明度以及浏览器兼容性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>透明度</title> <meta name="description" content=&q

11-js操作元素

js操作HTML的元素属性: <html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/> <!-- js操作HTML元素属性学习: 获取元素对象 操作元素属性 获取: 元素对象名.属性名//返回当前属性的属性值.----固有 元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义 修改 元素对

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

js兼容获取元素的样式

js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } 使用方法: 如需要获取id为Div1的left值,就可以写成: var oDiv = document.getElementById("div1"); getStyle(oDiv,"left"); 就可以获取到这个div的