JS基础——cssText的用法[通俗易懂]

JS基础——cssText的用法[通俗易懂]JS基础——cssText的用法#div1{width:100px;height:100px;background:#f3f3f3;border:1pxsolid#ccc;color:red;}window.onload=function(){ var oDiv=document.getElementById(‘div1’); varoBtn=docume

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS基础——cssText的用法</title>
<style>
#div1{ width:100px; height:100px; background:#f3f3f3; border:1px solid #ccc; color:red;}
</style>
<script>
window.onload = function(){
	var	oDiv = document.getElementById('div1');
	var oBtn = document.getElementById('btn1');
	
	oDiv.onclick = function(){
		oDiv.style.cssText = ' width:200px; height:200px; background:#ffc;';	
	};
	oBtn.onclick = function(){
		//oDiv.style.width = '100px';
		oDiv.style.cssText = '';	
	};
};
</script>
</head>

<body>
<div id="div1">123</div>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能。

但cssText也有个缺点,会覆盖之前的样式。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158879.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 自己搭建游戏加速器_自己可以搭建加速器吗

    自己搭建游戏加速器_自己可以搭建加速器吗因为自己用nn减速器和朋友联机方舟延迟太高了,联系客服,客服又不懂我的意思(就我b事最多,爱用不用),所以出一个自建游戏加速器的教程。对迷失森林,使命召唤,怪物猎人,方舟,这样的和朋友联机的游戏,效果极佳警告:别用这个施展魔法!否则后果自负!只能用来国内游戏和朋友联机!win7系统懒得折腾就放弃吧,win10系统继续往下看,开发者请忽略这篇文章1买一个自己的服务器首选阿里云,其次腾讯云,因为阿里云宽带大。其他云服务器商没试过,宽带估计不如阿里云和腾讯云。腾讯云和阿里云的宽带都是非常好的。恰

    2025年7月8日
    0
  • Lena图像分解成小块与从小块合成

    Lena图像分解成小块与从小块合成 ➤01背景在2020年人工神经网络课程第一次作业第八题中需要对Lena图像使用AutoEncode网络进行压缩。将Lena(灰度图像)拆解成不同尺寸的大小形成训练压缩样本过程;或者从训练结果重新组合成Lena灰度图像是实验的基础。▲Lena灰度图像下面给出相关操作的Python程序和相关的结果。主要操作包括:将512×512的Lena灰度图片(0~255)分割成边长8~16的图像块,并通过行扫描形行向量;对图像进行归一化,形成数据在-0.5~0.5之

    2022年6月19日
    19
  • PHP– AWS S3云存储上传多文件与上传单个文件

    PHP– AWS S3云存储上传多文件与上传单个文件

    2022年2月10日
    45
  • 零基础学Java(3)运算符

    零基础学Java(3)运算符运算符运算符用于连接值。Java提供了一组丰富的算术和逻辑运算符以及数学函数。算术运算符在Java中,使用算术运算符+、-、*、/表示加、减、乘、除运算。当参与/运算的两个操作数都是整数时,表示

    2022年7月31日
    4
  • 腾讯云服务器搭建NextCloud云盘[通俗易懂]

    腾讯云服务器搭建NextCloud云盘[通俗易懂]初衷我相信每个人都想要创造一点个人的小空间,存放某种东西(你懂的)。为了达到这个目的,顺便学习一下服务器的搭建,折腾了几天,终于算是搞定了,便记录如下。一准备思路:使用腾讯云服务器,部署LAMP。其实使用本地的电脑也是可以的,只是为了方便跨局域网访问,因为还没有学会如何绑定域名,如何用Nginx穿透局域网,所以只能借助别人的方便了。购买云服务器,略;给云服务器…

    2022年5月23日
    36
  • java多线程—Thread、Runnable和Callable区别

    多线程编程优点进程之间不能共享内存,但线程之间共享内存非常容易。系统创建线程所分配的资源相对创建进程而言,代价非常小。Java中实现多线程有3种方法:继承Thread类实现Runnable接口实现Callable接口(参考&lt;Java编程思想(第4版)&gt; 21.2.4章节,原来一直以为是2种,后来发现是3种)回到顶部第一种实现方法—继承Thread类继承Thread类,需要覆盖方法r…

    2022年4月7日
    52

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号