JavaScript如何操作css


Posted in Javascript onOctober 24, 2020

原本应该是由css进行控制html中的div的宽高和背景颜色,但是在下方使用了JavaScript进行重新调用了div盒子,并且覆盖了css原本的属性内容。

需求目标:由 100 像素的粉色背景色的div盒子变成了 300像素的橘黄色效果的div盒子

代码如下:

<!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-Type" content="text/html; charset=utf-8" />
<title>js控制css</title>
<style>
 <!-- div是html盒子的元素选择器 -->
div{
 background:pink;  <!-- 背景色:粉色 -->
 width:100px;  <!-- 宽度:100像素-->
 height:100px;  <!-- 高度:100像素 -->
}
</style>
</head>

<body>
<div id="txt"></div>

</body>
</html>
<!-- JavaScript代码只能在下面的script的标签体中可以书写 -->
<script>
//方式一:

 //查找到id为div的标签之后 继续查找style属性
 // document.getElementById('txt').style.width='300px';
 // document.getElementById('txt').style.height='300px';
 // document.getElementById('txt').style.background='orange';
 
//方式二:

 //先找到 id 为txt 的元素,把它放到一个变量中,这个过程可以理解为将右侧的结果赋值给左侧
 var t = document.getElementById('txt');
 // t就是变量名称,代表着html的盒子所在位置
 
 // 将盒子的样式中的宽度设置为300像素
 t.style.width='300px';
 // 将盒子的样式中的高度设置为300像素
 t.style.height='300px';
 // 将盒子的样式中的背景色设置橘黄色
 t.style.background='orange';

</script>

运行后的效果图如下:

JavaScript如何操作css

以上就是JavaScript如何操作css的详细内容,更多关于JavaScript操作CSS的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 #Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 #Javascript
You might like
php 一元分词算法
2009/11/30 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
实例讲解Python3中abs()函数
2019/02/19 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
详解python数据结构和算法
2019/04/18 Python
python生成特定分布数的实例
2019/12/05 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python如何解除一个装饰器
2020/08/07 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
详解pandas映射与数据转换
2021/01/22 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
法人委托书
2014/07/31 职场文书
预备党员转正材料
2014/12/19 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
新郎婚礼致辞
2015/07/27 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers