javascript修改阴影,js修改input边框颜色

1、要修改阴影，可以使用JavaScript中的style属性来操作元素的样式。阴影可以通过box-shadow属性来设置，该属性接受一个字符串值，用于描述阴影的样式、颜色和大小。

示例代码如下：

// 获取要修改阴影的元素
var element = document.getElementById("myElement");
// 修改阴影样式
element.style.boxShadow = "2px 2px 5px #888888";

在上述示例代码中，首先通过getElementById方法获取了一个id为"myElement"的元素，然后通过style属性来修改其阴影样式。boxShadow属性的值"2px 2px 5px #888888"表示阴影的水平偏移量为2px，垂直偏移量为2px，模糊半径为5px，颜色为#888888。

除了直接使用style属性来修改阴影样式外，还可以通过classList属性来添加或移除带有阴影样式的CSS类。这样可以更灵活地控制阴影的显示与隐藏。

示例代码如下：

// 获取要修改阴影的元素
var element = document.getElementById("myElement");
// 添加带有阴影样式的CSS类
element.classList.add("shadow");
// 移除带有阴影样式的CSS类
element.classList.remove("shadow");

在上述示例代码中，首先通过getElementById方法获取了一个id为"myElement"的元素，然后通过classList属性来添加或移除带有阴影样式的CSS类。通过添加或移除CSS类，可以更方便地控制阴影的显示与隐藏。

2、要修改input边框颜色，同样可以使用JavaScript中的style属性来操作元素的样式。边框颜色可以通过borderColor属性来设置，该属性接受一个字符串值，用于描述边框的颜色。

示例代码如下：

// 获取要修改边框颜色的input元素
var inputElement = document.getElementById("myInput");
// 修改边框颜色
inputElement.style.borderColor = "#ff0000";

在上述示例代码中，首先通过getElementById方法获取了一个id为"myInput"的input元素，然后通过style属性来修改其边框颜色。borderColor属性的值"#ff0000"表示边框颜色为红色。

除了直接使用style属性来修改边框颜色外，同样可以通过classList属性来添加或移除带有边框颜色的CSS类。这样可以更灵活地控制边框颜色的显示与隐藏。

示例代码如下：

// 获取要修改边框颜色的input元素
var inputElement = document.getElementById("myInput");
// 添加带有边框颜色的CSS类
inputElement.classList.add("red-border");
// 移除带有边框颜色的CSS类
inputElement.classList.remove("red-border");

在上述示例代码中，首先通过getElementById方法获取了一个id为"myInput"的input元素，然后通过classList属性来添加或移除带有边框颜色的CSS类。通过添加或移除CSS类，可以更方便地控制边框颜色的显示与隐藏。

需要注意的是，以上示例代码中的id值（"myElement"和"myInput"）以及CSS类名（"shadow"和"red-border"）仅为示例，实际使用时需要根据具体的HTML结构和CSS样式进行相应的修改。