写一段点击事件使div增加双红色边框
时间: 2023-05-29 21:01:49 浏览: 336
可以使用JavaScript为HTML元素添加点击事件。以下是一个例子:
HTML代码:
```html
<div id="myDiv">点击我</div>
```
JavaScript代码:
```javascript
// 获取div元素
const myDiv = document.getElementById("myDiv");
// 添加点击事件
myDiv.addEventListener("click", function() {
// 给div添加双红色边框
myDiv.style.border = "2px solid red";
myDiv.style.borderRadius = "10px";
});
```
当用户点击`<div>`元素时,JavaScript代码会将其边框的样式更改为双2像素的红色边框,并添加10像素的圆角。
相关问题
写一段css,div选中后红色边框右下角带小三角对勾
可以这样写:
div {
position: relative;
}
div::after {
content: "";
position: absolute;
bottom: -10px;
right: -10px;
border: 10px solid transparent;
border-bottom-color: red;
border-right-color: red;
transform: rotate(45deg);
display: none;
}
div:hover::after {
display: block;
}
div:focus::after {
display: block;
}
这段CSS会在div元素选中时,显示一个红色的右下角三角形对勾。当鼠标悬停在div上时,三角形对勾会出现。同时,当div获得焦点时,也会显示三角形对勾。
写一段扇形div代码
好的,以下是一个简单的扇形div代码,以一个半径为100px的圆为基础:
```html
<div class="sector"></div>
```
```css
.sector {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
border-radius: 100px 0 0 0;
}
```
这个div会显示一个红色的扇形,其半径为100px,角度为90度,因为只设置了上边和右边的边框,所以左下两边是没有边框的,同时设置了border-radius属性,将左下角的圆角去掉,使其成为一个扇形。
阅读全文