js修改css样式
修改宽度:
document.getElementById("div1").style.width="200px";
修改border-radius:
document.getElementById("div1").style.borderRadius="100px";
修改背景图片:
document.getElementById("div1").style.backgroundImage='url(img.jpg)';
或者:
document.getElementById("div1").style.cssText="border-radius:100px; width: 200px; background-image: url(img.jpg)";
注意:
1:用style.属性名="属性值" 的时候属性名可能要改变一下,比如border-radius要变为borderRadius;background-image要变为backgroundImage;
但是用style.cssText的时候里面属性名的写法和css的写法相同。
2:两种方法最好不要混用,当用style.cssText设置之后,写在这句代码之前的style.width等等将会失效。
CSS参考手册:http://www.ziqiangxuetang.com/cssref/css-reference.html
http://www.w3school.com.cn/h.asp
js修改css样式的更多相关文章
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- JS笔记一:动态修改css样式
---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- javascript 修改css样式
abc.css CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js中css样式
1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
随机推荐
- 解决ubuntu 20.04、22.04 即新版本 fcitx 无法使用的问题
前提 已在系统设置中将fcitx设置为默认 fcitx开机自启 配置的过程不在本文讨论范围之内 开机自启可通过安装gnome-tweaks配置实现 问题分析流程 手动启动fcitx时提示设置XMODI ...
- Redis面试必问题(一)缓存穿透、缓存击穿、缓存雪崩
一.缓存穿透(数据库没有,缓存没有) 1.概念 当查询Redis中没有数据时,该查询会下沉到数据库层,同时数据库层也没有该数据,当出现大量这种查询(或被恶意攻击)时,接口的访问全部透过Redis访问数 ...
- 一文总结你需要的OpenCV操作
目录 一.OpenCV简介 1.1 OpenCV是什么 1.2 安装及使用 二.图像的基础 2.1 成像原理 2.2 图像格式 2.3 颜色空间 三.OpenCV基础操作 3.1 图像的读取.显示.保 ...
- Go 语言:通过TDD驱动开发创建一个 Web 服务器,用户可以在其中跟踪玩家赢了多少场游戏。
你被要求创建一个 Web 服务器,用户可以在其中跟踪玩家赢了多少场游戏. GET /players/{name} 应该返回一个表示获胜总数的数字 POST /players/{name} 应该为玩 ...
- Python中实现单例的几种方式
Python如何实现单例? 什么是单例模式? 单例模式:一个类只能有一个实例化对象存在的模式. 如何实现单例? 1.使用模块 python中模块是天然的单例模式,当一个模块被调用时,会生成对应的.py ...
- 四月九号java知识
1.do{}while();和while(){}结构最主要区别就是前者后面要一个分号 2.System.out.print();与System.out.println();的区别后者输出换行, 前者不 ...
- Windows 下无法使用 C++11 标准 thread 类
问题描述 最近需要在 windows 平台使用 C++ 多线程编程,编译时提示错误 thread is not a member of std, or you maybe forget '#inclu ...
- day68:Vue:类值操作/style样式操作&v-for&filer/computed/watch&生命周期钩子函数&axios
目录 1.类值操作 :class 2.style操作样式 :style 3:示例:选项卡 @click+:class 4.v-for示例:循环商品显示 5.过滤器:filter 6.计算属性:comp ...
- 如何在 .NET Core WebApi 中处理 MultipartFormDataContent
最近在对某个后端服务做 .NET Core 升级时,里面使用了多处处理 MultipartFormDataContent 相关内容的代码.这些地方从 .NET Framework 迁移到 .NET C ...
- Istio数据面新模式:Ambient Mesh技术解析
摘要:Ambient Mesh以一种更符合大规模落地要求的形态出现,克服了大多数Sidecar模式的固有缺陷,让用户无需再感知网格相关组件,真正将网格下沉为基础设施. 本文分享自华为云社区<华为 ...