JS批量操作CSS属性详细分析

发布时间：2023-08-26 14:38:59 所属栏目：教程来源：

导读：代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.day

{

background-colo

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

        .day

        {

         background-color:White;

        }

        .night

        {

         background-color:Black

        }

    </style>

    <script language="javascript" type="text/javascript">

        function operStyle() {

            var divObj = document.getElementById("divContent");

            var btnObj = document.getElementById("btnCommit");

            if (divObj.className == "day") {

                divObj.className = "night";

                btnObj.value = "开灯";

            } else {

            divObj.className = "day";

            btnObj.value = "关灯";

            }

        }

        //批量修改div的样式属性，由多种样式构成

        //方法1：

        function methodOne() {

            var divObj = document.getElementById("divTest");

            divObj.style.backgroundColor = "blue";

            divObj.style.border = "solid 1px red";

            divObj.style.width = "300px";

            divObj.style.height = "200px";

            divObj.style.backgroundPosition = "center";

        }

        //方法2：

        function methodTwo() {

            var divObj = document.getElementById("divTest");

            divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center";

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!