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 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
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
怎么在Windows系统中搭建php环境
2013/08/31 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
JS验证码实现代码
2017/09/14 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
AJax面试题
2014/11/25 面试题
自我评价的正确写法
2013/09/19 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
自主招生推荐信范文
2014/05/10 职场文书
工程承包协议书范本
2014/09/29 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
安全生产协议书
2016/03/22 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技