JavaScript如何操作css
更新时间：2020年10月24日 16:21:04 作者：newmiracle宇宙
这篇文章主要介绍了JavaScript如何操作css，帮助大家更好的进行前端开发，优化网页，感兴趣的朋友可以了解下
原本应该是由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设计模式 – 观察者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要给大家介绍了关于JavaScript判断浏览器运行环境的详细方法，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
关于 JavaScript 的事件绑定在网上已经有不少相关的资料了，今天这篇文章也是在被同事问及的时候才顺便把它记录下来，算是 JavaScript 事件绑定中的一个小技巧，如果能在工作中善加利用，会有出其不意的效果2013-07-07
数组对象自带方法想必大家都有所耳闻,今天主要为大家介绍下JavaScript中数组对象的那些自带方法，感兴趣的你可以参考下哈，希望可以帮助你学习javascript2013-03-03
这篇文章主要为大家详细介绍了小程序自定义弹出框效果，支持淡入淡出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
按Ctrl+Enter发送，思路是监听textarea的onkeydown事件，当ctrl键被按下，并且，keycode为13（回车），时，调用发送表单的函数2014-09-09
如何终止forEach循环这个问题估计会难倒一部分同学,甚至会有人反问,forEach循环在JavaScript中能终止吗？本文小编给大家介绍了三种方式可以终止forEach循环,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了使用JavaScript 实现的人脸检测的方法和实例，非常的不错，这里推荐给大家，有需要的小伙伴参考下。2015-03-03
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
在页面开发时我们少不了各种鼠标交互动作，那么JavaScript中如何实现鼠标坐标获取和窗口内模块拖动，本文就详细的介绍一下，感兴趣的可以了解一下2021-05-05
这篇文章主要介绍了JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
最新评论