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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 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
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js中生成map对象的方法
2014/01/09 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
2014/08/21 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
python的json包位置及用法总结
2020/06/21 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
妇科医生自荐信
2013/11/05 职场文书
学校后勤人员职责
2013/12/27 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
房屋买卖协议书
2014/04/10 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
闪闪的红星观后感
2015/06/08 职场文书
雷锋之歌观后感
2015/06/10 职场文书
开业典礼致辞
2015/07/29 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers