在诗词第一行上使用one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX;
时间: 2023-12-03 21:43:19 浏览: 16
好的,您可以在代码中这样使用:
```javascript
document.querySelector('.poem .line:first-child').addEventListener('click', function() {
document.querySelector('.poem').style.fontSize = '24px';
});
```
这段代码会找到第一行诗词,并且给这行加上一个单击事件,当单击时让整个诗词字体变成24px。注意这里使用了querySelector来获取元素,并且使用了style属性来修改CSS样式。
相关问题
one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX
好的,以下是设置整个诗词正文字号为24PX的代码:
```
function one() {
document.body.style.fontSize = '24px';
}
```
你可以将此函数添加到单击事件中来实现该功能。
在网页DIV中设置一首诗词要求有诗的标题和作者,在标题上绑定双击事件,每一次双击标题时标题放大4px,在双击3次后解除绑定;在诗词第一行上使用one()函数绑定单击事件,单击时设置整个诗词正文字号设为24PX;在诗词
中每隔一行设置一个背景色,颜色可以自选。以下是HTML和JavaScript代码实现该功能:
```html
<div id="poem">
<h2 id="title">静夜思</h2>
<p id="author">李白</p>
<p>床前明月光,疑是地上霜。</p>
<p>举头望明月,低头思故乡。</p>
<p>明月几时有?把酒问青天。</p>
<p>不知天上宫阙,今夕是何年。</p>
</div>
```
```javascript
$(document).ready(function() {
var count = 0;
// 双击标题放大4px,双击3次后解除绑定
$('#title').dblclick(function() {
$(this).css('font-size', '+=4px');
count++;
if (count == 3) {
$(this).off('dblclick');
}
});
// 单击第一行设置整个诗词正文字号为24px
$('#poem p:first-child').one('click', function() {
$('#poem p').css('font-size', '24px');
});
// 每隔一行设置背景色
$('#poem p:nth-child(even)').css('background-color', '#f5f5f5');
$('#poem p:nth-child(odd)').css('background-color', '#e9e9e9');
});
```
注意,这里使用了jQuery库中的一些方法,需要先在HTML文档中引入jQuery库。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)