js 修改边框颜色

JavaScript028

js 修改边框颜色,第1张

不要混合html属性和css属性(测试发现似乎只有IE会这样)。

在table里添加属性style="border-color:#00F",然后去掉bordercolor属性:

<script type="text/javascript">

function borderit(which){

//if IE 4+ or NS 6+

if (document.all||document.getElementById){

which.style.borderColor="FF0000"

}

}

</script>

</head>

<table border="3" onmousemove="borderit(this)" style="border-color:#00F" cellpadding="0" cellspacing="0">

<tr><td>2345345345</td></tr>

</table>

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%

 String path = request.getContextPath()

 String basePath = request.getScheme() + "://"

   + request.getServerName() + ":" + request.getServerPort()

   + path + "/"

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

  <base href="<%=basePath%>">

  <title>JS修改背景</title>

  <script type="text/javascript">

function JS() {

 document.addmemeber("form1").memberName("int1").style.background = '#eeeeee'

}

function hid(){

 var value = document.getElementByIdx_x("h").value 

 alert(value) 

 

}

</script>

 </head>

 <body>

  <form action="" name="form1">

   <input type="text" name="int1" value="" onclick="JS()"/><br/>

   <input type="hidden" id="h" name="h" value="隐藏"/>

   <input type="button" value="按钮" onclick="hid()"/>

  </form>

 </body>

</html>

通过js来改变CSS属性,使用jQuery可以很方便的实现,像这样:

$("img").css('border-color','red')

就可以把边框颜色都变成红色。

这是针对此问题的测试页面

2、这是3张图片

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>

<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>

3、这是图片的样式,边框默认为灰色。

img{

max-width:200px

border-color:gray

border-width:10px

border-style:solid

}

4、现在通过这几行用到jQuery的代码,控制图片边框根据鼠标移入移出边框变灰和变红。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red')

}).on('mouseout',function(){

$(this).css('border-color','gray')

})

})

5、效果如图