事件绑定与操作样式_怎么用事件绑定实现样式改变-优快云博客

本文链接：https://blog.youkuaiyun.com/tianranran/article/details/121752353

这篇博客介绍了JavaScript中如何通过事件属性和事件绑定实现按钮点击效果，同时讲解了元素样式的操作，包括行内样式、内部样式类及属性的修改。此外，还涉及了获取和设置元素属性的方法，以及如何通过JavaScript更换图片。示例代码详实，适合初学者掌握JavaScript基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<button id="btn1" onclick="onBtn()">按钮1</button>

    <button id="btn2">按钮2</button>

    <script>
        function onBtn(){
            alert('事件属性触发')
        }


        // 获取按钮元素
        var btn2Ele = document.querySelector('#btn2')
        //绑定事件
        btn2Ele.onclick = function(){
            alert('事件绑定触发')
        }
两种效果一样

操作样式

操作样式
          => 获取操作的元素
          => style  
               行内样式
            语法:
              标签元素.style.样式名 = 样式值

              标签元素.css({'width':'200px','height':'200px'})


.c1{
             color: blue;
             font-size: 18px;
             text-align: center;
         }
         .c2{
             background-color: royalblue;
         }
     </style>
</head>
<body>
    <div></div>

    <!-- <h2 class="c1 c2">操作元素样式</h2> -->
    <h2>操作元素样式</h2>

    <script>
        //行内样式 style
        var divEle = document.querySelector('div')  
        divEle.style.width = '200px' // 设置元素width样式值为200px
        divEle.style.height = '200px'
        divEle.style.backgroundColor = 'red'

        //操作内部样式 className
        var h2Ele = document.querySelector('h2')
        // h2Ele.className = 'c1'
        // h2Ele.className = 'c2'


        //操作多个内部样式 classList
        h2Ele.classList.add('c1')
        h2Ele.classList.add('c2')
        h2Ele.classList.add('c3')

        h2Ele.classList.remove('c2')

操作属性

<div id="d1" a='100' class="c1"></div>

    <script>
        var divEle = document.querySelector('#d1')
        var value1 = divEle.getAttribute('class')
        var value2 = divEle.getAttribute('a')
        console.log(value1, '  ', value2)
                     c1             100

        divEle.setAttribute('data-index',1001)

        divEle.removeAttribute('a')
        console.log(divEle)
 <div id="d1" class="c1" data-index="1001"></div>

示例

图片更换
<img src="./02练习岛上书店/images/book.jpg" alt="book" >
    <button id="btn1">更改图片</button>
    <script>
        //点击按钮改变图片
var btnEle = document.querySelector('#btn1')
        //绑定点击事件
btnEle.onclick = function(){
            //换图片
    var imgEle = document.querySelector('img')
imgEle.setAttribute('src','./02练习岛上书店/images/11239.png')
        }