DOM基础（二）

古城微笑少年丶 2023-07-17 14:10 2阅读 0赞

# DOM（如何设置元素样式） #

--------------------

## 设置元素样式 ##

语法：

ele.style.styleName=styleValue

功能：

设置ele元素的CSS样式

说明：

1. ele为要设置样式的DOM对象  
2. styleName为要设置的样式名称  
（不能使用“-”连字符形式font-size，要使用驼峰命名形式fontSize）  
3. styleValue为设置的样式值

--------------------

### 选择练习 1 ###

ele.style.styleName=styleValue;  
关于上面的公式，下列说法错误的是？（选择一项）

**A** ele是要设置样式的元素名称  
**B** ele是要设置样式的DOM对象  
**C** styleName是要设置的样式名称  
**D** styleValue是要设置的样式值

**正确答案： A**  
参考解析：该题考察的是dom样式设置的语法，选择说法错误的，元素名称是元素的标签名称 , ele是获取设置样式的元素的DOM对象。应选择A

--------------------

### 编程练习 1 ###

小伙伴们，今天我们学习了dom对象的样式设置，按照下面的效果图编写代码！

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_ffffff_t_70_pic_center]

#### 任务 ####

根据效果图完成以下步骤：  
第一步：通过ID选取元素的方法获取到这4个div对象  
第二步：  
（1）将第一个div对象的字体设置为红色  
（2）将第二个div对象的背景颜色设置为绿色  
（3）将第三个div对象的字体加粗  
（4）将第四个div对象的字体大小设置为30像素

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>dom的样式设置</title>
    	</head>
    	<body>
    		<div id="div1">第一个div里的内容</div>
    		<div id="div2">第二个div里的内容</div>
    		<div id="div3">第三个div里的内容</div>
    		<div id="div4">第四个div里的内容</div>
    		<script> document.getElementById("div1").style.color="red"; document.getElementById("div2").style.backgroundColor="green"; document.getElementById("div3").style.fontWeight="bolder"; document.getElementById("div4").style.fontSize="30px"; </script>
    	</body>
    </html>

--------------------

### 编程练习 2 ###

根据下面的效果图，写出代码，实现列表各行换色的效果！

效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center]

#### 任务 ####

第一步：写出html结构，用ul li 列表显示内容  
第二步：获得列表项对象，注意获得的对象是一个数组  
第三步：使用循环，为列表的奇数项设置背景颜色为黄色，循环中递加的时候+=2。

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>列表各行换色</title>
    	</head>
    	<body>
    		<h3>前端知识点</h3>
    		<ul id="listWeb">
    			<li>JavaScript基础</li>
    			<li>CSS基础</li>
    			<li>HTML基础</li>
    			<li>CSS3</li>
    			<li>HTML5</li>
    			<li>jQuery</li>
    			<li>Bootstrap</li>
    			<li>WebApp</li>
    		</ul>
    		<script> list=document.getElementsByTagName("li"); for(var i=1;i<list.length;i+=2){ list[i].style.backgroundColor="yellow"; } </script>
    	</body>
    </html>

--------------------

### 选择练习 2 ###

给DOM对象设置红色的背景颜色，下列写法正确的是？（选择一项）

**A** ele.style.backgroundcolor=red ;  
**B** ele.style.backgroundColor=“red”;  
**C** ele.style.background-color=“red”;  
**D** ele.style.backgroundColor=red ;

**正确答案： B**  
参考解析：该题考察的是dom样式的设置正确选项为B；样式名称如果是复合形式，要转换为驼峰形式，属性值如果是字符串，要加引号。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_ffffff_t_70_pic_center]: /images/20230528/2c635172f5af409fb7eb7c1f6a28de86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/c0b8f44145424dcc82ff3b54b4422471.png