JavaScript第一讲之js操作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>
运行后的效果图如下:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
面试汇总1
一、mysql部分 二、django部分 三、Python部分 四、RESTful API设计指南 五、git 六、项目部分 一、MySQL 1、mysql如何做分页 mysql数据库做分页用limit关键字,它后面跟两个参数startIndex和pageSize 2、mysql引擎有哪些,各自的特点是什么? innodb和myisam两个引擎,两者区别是 innodb支持事物,myisam不支持 innodb支持外键,myisam不支持 innodb不支持全文索引,myisam支持全文索引 innodb提供提交、回滚、崩溃恢复能力的事物的安全能力,实现并发控制 myisam提供较高的插入和查询记录的效率,主要用于插入和查询 3、数据库怎么建立索引 1create index account_index on `table name `(`字段名`(length) 4、一张表多个字段,怎么创建组合索引 1create index account_index on `table name `(`字段名`,'字段名') 5、如何应对数据的高并发,大量的数据计算 1....
- 下一篇
Java 中的位运算
预备知识 原码 : 符号位加上真值的绝对值, 即用第一位表示符号, 其余位表示值。 反码 : 正数的反码是其本身;负数的反码是在其原码的基础上, 符号位不变,其余各个位取反。 补码 : 在计算机中,二进制数值是以补码的形式存放, 正数补码是其本身,负数的补码为 除符号位的(反码+1) 计算机中的数值是以其补码的方式存储的. java中的基础位运算符 java中提供的基础位运算符有 与(&),或(|),非(~),异或(^),左移<<,右移(>>)和无符号右移(>>>). 除了位非(~)是一元操作符外,其它的都是二元操作符。 以下的 A,B为二进制表示的数字. 按位与 A & B : A和B对应的二进制数位都为1时,结果才为1,其他情况为0. A = 001101 // 13 B = 100101 // 37 A & B = 000101 // 5 按位或 A | B : A和B对应的二进制数位都为0时,结果才为0,其他情况为1. A = 001101 // 13 B = 100101 // 37 A | B = 10110...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Docker安装Oracle12C,快速搭建Oracle学习环境
- 2048小游戏-低调大师作品
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能