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 ...
随机推荐
- redis 5种数据类型的增删改查
string: 增:set name zhangsan 删:del name 改:set name lisi 查:get name hash: 增:hmset name name1 zhangsan ...
- 非线性规划—R实现
非线性规划 非线性规划是一种求解目标函数或约束条件中有一个或几个非线性函数的最优化问题的方法.运筹学八大分支之一,20世纪50年代初,库哈(H.W.Kuhn) 和托克 (A.W.Tucker) 提出了 ...
- [Linux]常用命令之【diff】
1 概述 2 diff命令 diff 命令是 Linux 上比较重要的命令行工具,用于比较文本内容,并找到不相同的地方,diff 在命令行中打印每一行的改动之处. diff 程序的输出被称为补丁(pa ...
- IIS 部署.NET CORE 项目 出现 HTTP 错误 500.19 - Internal Server Error
当出现这个错误时是因为服务器上没有.NET CORE对应的SDK以及运行时文件,我的.NET CORE版本是2.2,下载的就是2.2对应的文件. 附上.NET CORE2.2版本的下载链接 下载 .N ...
- Java SpringBoot 7z 压缩、解压
Java SpringBoot 7z 压缩.解压 cmd 7z 文件压缩 7z压缩测试 添加依赖 <dependency> <groupId>org.apache.common ...
- shell脚本编程(一)
c81ba641-5ed7-4ab9-a7c0-e319e0f3890b 初识shell脚本编程 最近项目需求,需要了解下shell脚本编程,所以自己就必须玩玩了= = 初识shell脚本编程,找了几 ...
- ts中接口
前言:ts定义接口的任意一个属性 interface IPerson { name: string age: number family?: any[] // Error,因为不是任意类型的子集 [p ...
- WPF 屏幕点击的设备类型
1.鼠标 可以通过Mouse相关的事件参数MouseButtonEventArgs中的数据,e.StylusDecice==null表示没有触摸设备,所以设备为鼠标 2.触笔 or 触摸 根据Styl ...
- [Pytorch框架] 5.2 Pytorch处理结构化数据
文章目录 5.2 Pytorch处理结构化数据 简介 数据预处理 定义数据集 定义模型 训练 import numpy as np import pandas as pd import torch f ...
- NC19469 01串
题目链接 题目 题目描述 I used to believe We were burning on the edge of something beautiful Something beautifu ...