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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
Vuex提升学习篇
Jan 11 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue实现打地鼠小游戏
Aug 21 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创建动态图像
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
非常好的js代码
2006/06/27 Javascript
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python dataframe NaN处理方式
2019/12/26 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
中职生自荐信
2013/10/13 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
小学教师事迹材料
2014/01/13 职场文书
女子职高个人自荐书
2014/02/01 职场文书
授权委托书
2014/07/31 职场文书
心得体会的写法
2014/09/05 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
培训心得体会怎么写
2016/01/25 职场文书
导游词之舟山普陀山
2019/11/06 职场文书