js 改变border
时间: 2023-07-08 14:04:47 浏览: 60
您可以使用 JavaScript 中的样式属性 `border` 来改变一个元素的边框。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Change Border with JavaScript</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="changeBorder()">Change Border</button>
<script>
function changeBorder() {
var box = document.querySelector('.box');
box.style.border = '3px solid red';
}
</script>
</body>
</html>
```
在上面的示例中,我们定义了一个具有默认边框的 `div` 元素,在页面上添加了一个按钮。当按钮被点击时,`changeBorder()` 函数会被调用,该函数通过 `querySelector()` 方法找到 `.box` 元素,并将其 `border` 样式属性更改为 3 像素的红色实线边框。
相关问题
js怎么改变border的颜色
可以使用CSS的border-color属性来改变边框的颜色,例如:
```css
/* 选择器 */
.selector {
/* 边框样式 */
border-style: solid;
/* 边框粗细 */
border-width: 1px;
/* 边框颜色 */
border-color: red;
}
```
上述代码中,`.selector`是要改变边框颜色的元素的选择器,`border-style`可以设置边框的样式,`border-width`可以设置边框的粗细,`border-color`可以设置边框的颜色。其中,`border-color`属性可以接受任何有效的颜色值,如颜色名称、RGB值、十六进制值等。
js动态改变div宽高
你可以使用JavaScript来动态改变一个div元素的宽高,具体的方法如下:
1. 获取要操作的div元素,可以通过document.getElementById()或document.querySelector()等方法获取。
2. 使用style.width和style.height属性来修改div元素的宽高值,如:
```javascript
var div = document.getElementById('myDiv');
div.style.width = '200px';
div.style.height = '100px';
```
上面的代码会将id为'myDiv'的div元素的宽度设置为200像素,高度设置为100像素。
另外,你也可以使用其他的CSS属性来改变div元素的样式,例如:
```javascript
div.style.backgroundColor = 'red'; //设置背景色为红色
div.style.border = '1px solid black'; //设置边框为1像素的黑色实线
```
这样就可以通过JavaScript动态地改变一个div元素的样式了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)