js实现点击改变文字大小

这篇具有很好参考价值的文章主要介绍了js实现点击改变文字大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前言

在编写代码之前我们先来看看通过js获取元素有几种方式:
1.第一种

  • document.querySelector()
    返回文档中匹配指定的选择器组的第一个元素
  • document.querySelectorAll();
    返回文档中匹配指定的选择器组的所有元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="demo1"></div>
		<div class="demo1"></div>
	</body>
	<script>
		var ele1=document.querySelector(".demo1");
		var ele2=document.querySelectorAll(".demo1");
		console.log(ele1);
		console.log(ele2);
	</script>
</html>

js实现点击改变文字大小
2.第二种

  • document.getElementById()
    通过id获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="demo1">hello js</div>
</body>
<script>
    var ele1 = document.getElementById('demo1');
    console.log(ele1);
</script>
</html>

js实现点击改变文字大小
3.第三种

  • document.getElementsByTagName()
    通过标签名获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div>hello js</div>
</body>
<script>
    var ele1 = document.getElementsByTagName('div');
    console.log(ele1);
</script>
</html>

js实现点击改变文字大小
4.第四种

  • document.getElementsByName()
    通过name属性获取元素

5.第五种

  • document.getElementsByClassName()
    通过class属性获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div name="test">hello js</div>
</body>
<script>
    var ele1 = document.getElementsByName('test');
    console.log(ele1);
</script>
</html>

js实现点击改变文字大小
了解了之后我们下面开始实现代码功能

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align: center;
        }
        .box{
            overflow: hidden;
            margin: auto;
            width: 800px;
            height: 200px;
            background-color: gray;
        }
        .nav{
            text-align: center;
        }
        #text{
            font-size: 20px;
            margin-top: 20px;
            margin-left: 10px;
            padding-top: 20px;
            line-height: 30px;
        }
    </style>

</head>
<body>
    <h1>用JavaScript改变新闻网页中的字号</h1>
    <div class="nav">选择字号【
        <a href="javascript:ChangeSize(12)"></a>
        <a href="javascript:ChangeSize(18)"></a>
        <a href="javascript:ChangeSize(24)"></a></div>
    <div class="box">
        <div id="text">
            &nbsp;&nbsp;&nbsp;&nbsp;JavaScript是一种能让你的网页更加生动活泼的程序语言 ,也是目前网页设计中最容易学又最方
            便的语言。你可以利用JavaScript轻易地做出亲切的欢迎信息漂亮的数字钟、有广告效果的跑马
            灯及简单的选举票单,还可以显示浏览器停留的时间,这些特殊效果可以提高网页的可观性。
        </div>
    </div>
</body>
<script>
    function ChangeSize(Size) {
    	//获取文本元素
        const ele = document.getElementById("text")
        //改变文本上的fontSize属性
        ele.style.fontSize=Size+"px"
    }
</script>
</html>

效果:
js实现点击改变文字大小文章来源地址https://www.toymoban.com/news/detail-448905.html

到了这里,关于js实现点击改变文字大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android 动态代码设置view宽高参数,运行后UI大小没有改变问题

         日常开发中遇到一个需求,就是根据业务逻辑,动态改变一个view控件的大小。这种需求也是比较常见的,但是小白比较容易遇到一个小问题,就是代码重新设置了view的宽高大小,运行后发现view没有发生改变。          如下图,1,横屏 2,正方形,3,竖屏      

    2024年02月16日
    浏览(47)
  • C#图像的剪裁、复制、改变大小实现实例

    本文展示C#语言实现: 克隆 的方法复制 图片 、 GDI 的方法 图像剪裁 、 Clone 方法 图像剪裁 、 GDI 的方法 改变图像像素大小 直接上代码:

    2024年02月14日
    浏览(31)
  • CLion用ctrl+鼠标改变代码字体大小&&代码自动对齐快捷键(Ctrl +a、Ctrl + alt + I )

            在使用CLion编写代码时,有时候我们需要查看代码的全部内容,但屏幕显示的区域有限,不能一次性显示所有的代码。这时可以通过缩放代码字体的方式来查看全部代码。         CLion提供了一种快捷键,即按住 Ctrl 键并滚动鼠标滚轮,可以快速改变代码字体的

    2024年02月04日
    浏览(103)
  • 2022-9-2 QT实现画板(能改变画笔大小,颜色)

    用QT实现画板功能,代码如下 首先是头文件部分代码 后面是mywnd.cpp部分的代码 最后是main.cpp部分的代码 下面是运行的内容    

    2024年02月13日
    浏览(48)
  • Qt实现改变无标题栏窗体大小及移动窗体

    目录 1.问题的提出 2.实现方法 3.存在的问题 一般情况下,当去掉窗体标题栏时,按住鼠标左键就无法实现拖动窗体;当去掉窗体标题栏时,窗体四周的边框也去掉了,此时按住鼠标左键拖动窗体四周边沿,无法实现鼠标拖动改变窗体大小。如下为Qt实现去掉窗体标题栏的代码

    2024年02月13日
    浏览(39)
  • css实现文字大小自适应

    在页面编写中经常会碰到页面自适应的问题,也就是页面内部的元素会随着窗口的放大缩小而放大缩小,box可以通过calc + 百分比的形式做到页面自适应,但是 box 内的字体却无法做到这点,往往 box 自适应大小了,内部的字体还是原来的大小,看起来会非常别扭,下面就来

    2024年02月02日
    浏览(43)
  • CSS 实现鼠标移动到图片上图片变大,不改变盒子大小

    实现鼠标经过图片时,图片等比放大,但是图片的父盒子不会改变;主要使用了 css 的动画来实现。

    2024年02月05日
    浏览(60)
  • 基于Vue3实现鼠标按下某个元素进行移动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能

    其原理主要是利用JavaScript中的鼠标事件来控制CSS样式。大致就是监听某个DOM元素的鼠标按下事件,以及按下之后的移动事件和松开事件。在鼠标按下且移动过程中,可实时获得鼠标的X轴坐标的值,通过简单计算,可计算出目标元素的宽度,然后再用CSS赋值就实现该效果了。

    2024年02月15日
    浏览(48)
  • 基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能

    其原理主要是利用JavaScript中的鼠标事件来控制CSS样式。大致就是监听某个DOM元素的鼠标按下事件,以及按下之后的移动事件和松开事件。在鼠标按下且移动过程中,可实时获得鼠标的X轴坐标的值,通过简单计算,可计算出目标元素的宽度,然后再用CSS赋值就实现该效果了。

    2024年02月12日
    浏览(45)
  • 解决Selenium中无法点击元素,Selemium使用JS代码 driver.execute_script点击元素

    driver.execute_script(\\\"arguments[0].click();\\\",Approved) 这句话的意思是使用 JavaScript 在浏览器中执行一个点击操作,将页面元素 \\\"supportUser\\\" 点击。 具体来说,\\\"driver.execute_script\\\" 是调用浏览器驱动程序 (driver) 的一个方法,它可以用来在浏览器中执行 JavaScript 代码。\\\"arguments[0].click()\\\" 是一段

    2024年02月05日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包