当前位置: 首页 > news >正文

网页JS自动化脚本(四)修改元素的尺寸颜色显隐状态

修改元素尺寸

  • 在定位到了元素之后, 我们就可以对元素进行一些修改了,我们先来修改元素泊宽度以及高度
window.onload=function(){
  var theElement=document.querySelector("img.undertips-link-lefticon");
  theElement.style.width="100px";
  theElement.style.height="100px";
}
  • 我们修改第9代的第一个img图片,所以还是先用var 设置了一个可变类型的变量随意取名为theElement,并给他赋值为一个元素,所以我们就把这个img元素放进入,后面接元素定位
  • 然后修改这个theElement的style属性中的width就是宽度的值为"100px",记得末尾要加上分号,而且值是要用引号包括起来的,值的后面一般是要带上单位的,px就是像素,这里表示把图片img的宽度修改成100个像素宽,以及下面一行中的100个像素高height.
  • 我们看一下效果
    在这里插入图片描述

修改文字颜色

window.onload=function(){
  var theElement= document.querySelector("span.undertips-link-text");
  theElement.style.color="red";
}
  • 这一次来修改文字颜色为大红色red,这些样式都是在元素的style里面进行修改的,当然直接使用十六进制的颜色表示法#,后面接六个16进制数,前2位表示RGB中的R也就是red红色,中间的3位4位表示G也就是green绿色,最后两位表示B也就是blue蓝色,所以大红色也可以表示成"#FF0000",为什么是两个16进制数表示一个颜色呢,因为FF=255,也就是8位2进制的11111111,刚好一个字节(byte)=8个位(bit),所以RGB颜色就用三个字节就可以表示,很方便
    在这里插入图片描述

修改背景颜色

window.onload=function(){
  document.querySelector("span.undertips-link-text").style.backgroundColor="red";
}
  • 设置背景颜色为大红色
    在这里插入图片描述

修改显隐状态

window.onload=function(){
  document.querySelector("span.undertips-link-text").style.display = "none";
}
  • 把中间文字的展示状态设置为不可见
    在这里插入图片描述

相关文章:

  • 电商新趋势:Starday拿下黑色星期五的制胜法宝是物流速度
  • 【问题思考总结】NAT的公有地址怎么转换为私有地址?【MAC地址和IP地址的转换】
  • [附源码]Python计算机毕业设计SSM力高灯饰线上交易平台(程序+LW)
  • 正则表达式备忘录(全网最详细正则)
  • 2022年11月30日 Fuzzy C-Means学习笔记
  • 函数定义、this指向、闭包等
  • [附源码]计算机毕业设计springboot课室预约系统
  • 周期信号与非周期信号
  • 串口 COM口,并口 LPT口,RS232、RS485、CAN
  • m扩频通信系统在瑞利信道中的误码率性能matlab仿真
  • 如何在 SwiftUI 中创建条形图
  • 护眼灯真的有用吗?2022双十二选哪个牌子的护眼台灯好
  • Codeforces Round #721 (Div. 2) C. Sequence Pair Weight
  • java毕业设计滴答拍摄影项目mybatis+源码+调试部署+系统+数据库+lw
  • Linux基本命令(四)——firewall
  • 证券企业基于华为全闪存存储实践经验分享
  • AutoCAD Electrical 2022—源箭头和目标箭头
  • linux权限详解
  • 为什么macbook不能删除u盘里东西?苹果电脑如何删除u盘文件
  • WeetCode2滑动窗口系列
  • QTimer定时器不起作用的原因
  • html5从外部文件随机抽取数字,shell 随机从文件中抽取若干行的实现方法
  • Qt导出PDF文件的两种方法
  • HTML网格目录代码,html – 使用定义列表和网格布局创建表
  • 常用日期格式符与Qt获取当前时间的办法
  • html显示elasticsearch,html - 当我使用突出显示时,Elasticsearch返回损坏的HTML标记 - 堆栈内存溢出...
  • 如何自制一个安装程序,将程序打包生成安装程序的办法
  • 计算机启用网络,win7无法启用网络发现怎么办
  • Qt编译出错ERROR: Unknown module(s) in QT: script
  • 计算机的起源和历史英语作文,咖啡的起源英文版The History of Coffee