JavaScript第一讲之js操作css-低调大师

JavaScript第一讲之js操作css

2018-08-20 497

原本应该是由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>

运行后的效果图如下:

微信关注我们

原文链接：https://yq.aliyun.com/articles/681042

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道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....

2018-08-21

487

预备知识原码 : 符号位加上真值的绝对值，即用第一位表示符号，其余位表示值。反码 : 正数的反码是其本身；负数的反码是在其原码的基础上，符号位不变，其余各个位取反。补码 : 在计算机中,二进制数值是以补码的形式存放, 正数补码是其本身,负数的补码为除符号位的(反码+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...

2018-08-21

474

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。