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中的Screen屏幕对象
Jan 16 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
Vue+Bootstrap实现简易学生管理系统
Feb 09 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 foreach循环使用详解与实例代码
2010/05/08 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python中self原理实例分析
2015/04/30 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
python__name__原理及用法详解
2019/11/02 Python
python中get和post有什么区别
2020/06/19 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
行政专员岗位职责
2014/01/02 职场文书
农村婚礼主持词
2014/03/13 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
特此通知格式
2015/04/27 职场文书
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏