修改宽度:

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样式的更多相关文章

  1. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  2. JS笔记一:动态修改css样式

    ---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小 通过函数来传递图片id,height,width,使用doc ...

  3. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  4. javascript 修改css样式

    abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE ...

  5. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  6. js中css样式

    1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...

  7. js操作css样式、js的兼容问题

    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...

  8. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  9. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  10. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. 细节拉满,80 张图带你一步一步推演 slab 内存池的设计与实现

    1. 前文回顾 在之前的几篇内存管理系列文章中,笔者带大家从宏观角度完整地梳理了一遍 Linux 内存分配的整个链路,本文的主题依然是内存分配,这一次我们会从微观的角度来探秘一下 Linux 内核中用 ...

  2. [Git/SVN] Gitee使用教程

    1 Gitee Gitee 提供免费的 Git 仓库,还集成了代码质量检测.项目演示等功能. 对于团队协作开发,Gitee 还提供了项目管理.代码托管.文档管理的服务,5 人以下小团队免费. CASE ...

  3. AF_XDP技术简介

    本文分享自天翼云开发者社区@<AF_XDP技术简介>,作者: l****n 一.概述 AF_XDP 是一项新增的,针对高性能数据包处理进行优化的地址族协议.本文档假设读者已经熟悉 BPF ...

  4. windows 10 家庭版安装Docker和portainer汉化版

    目录 前景提要 存在问题 一.Docker的windows版本安装 1.官网下载: https://www.docker.com/(没有本文问题的直接下载就好.) 2.本文是找到其他版本的Docker ...

  5. ILLA Cloud: 调用 Hugging Face Inference Endpoints,开启大模型世界之门

    一个月前,我们 宣布了与 ILLA Cloud 与达成的合作,ILLA Cloud 正式支持集成 Hugging Face Hub 上的 AI 模型库和其他相关功能. 今天,我们为大家带来 ILLA ...

  6. day117:MoFang:宠物栏的功能实现&宠物道具的使用

    目录 1.宠物栏的功能实现 2.宠物道具的使用 1.宠物栏的功能实现 1. 宠物的显示 2. 宠物的使用 3. 宠物的饱食度 4. 宠物的开锁 1.服务端提供显示宠物的api接口 orchard/so ...

  7. PHP__采集类__Snoopy

    Snoopy                                                  目录 了解Snoopy.1 功能:...1 下载Snoopy:...2 Snoopy常用 ...

  8. ajax面试题总结

    转载请注明出处: 1.ajax异步和同步的区别 Ajax是一种基于JavaScript语言和XMLHttpRequest对象的异步数据传输技术,通过它可以使不用刷新整个页面的情况下,对页面进行部分更新 ...

  9. 基于海思H3520DV400和QT5.9设计的车载终端DVR控制平台

    ​ 目录 前言: 说明: 功能介绍: 设计思路: 详细设计: QT界面设计: 代码实现: 注意事项: (一)QT运行慢问题 (二)QT图层隐藏问题 (三)鼠标问题 (四)字体问题 (五)主界面图案 ( ...

  10. [C++提高编程] 3.4 案例-评委打分

    文章目录 3.4 案例-评委打分 3.4.1 案例描述 3.4.2 实现步骤 3.4 案例-评委打分 3.4.1 案例描述 有5名选手:选手ABCDE,10个评委分别对每一名选手打分,去除最高分,去除 ...