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 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 Javascript
Vue基本指令实例图文讲解
Feb 25 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版
2012/04/20 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vuex操作state对象的实例代码
2018/04/25 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
经典c++面试题二
2015/08/14 面试题
大课间活动实施方案
2014/03/06 职场文书
开展创先争优活动总结
2014/08/28 职场文书
工程部部长岗位职责
2015/02/12 职场文书
小学班主任教育随笔
2015/08/15 职场文书
体育教师教学随笔
2015/08/15 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android