问题描述
嘿所有，
我有一个带有DIV标签的按钮（这样我就可以自定义
可以使用BUTTON标签）并且我希望能够制作
当我点击鼠标按钮时看起来它是插入的，并且当我回到开始时我会放弃
放手鼠标我正在使用坚固的边框样式，只需更改
颜色（再次获得自定义边框颜色）
当鼠标按钮上升或下降时
。这种方式当这个函数第一次被调用（mousedown）时，顶部和左边的颜色将与底部和右边的颜色交换
，从而给出插图
外观。我的问题是由于某种原因
obj.style.borderLeftColor等属性返回空白。任何想法
为什么？下面给出了DIV标签的CSS和HTML以及mousedown / mouseup事件的
Javascript代码。
..cartBtnRemove
{
font-family：arial;
font-size：10pt;
font-weight：bold;
光标：默认;
宽度：85px;
padding-top：2px;
padding-bottom：2px;
边框：2px实体;
border-color：＃F5F5DC黑色黑色＃F5F5DC;
margin-bottom：5px;
background-color：lightgrey;
text-align：center;
}
< DIV class = ''cartBtnRemove''onmousedown =''clickRemove（event）''
onmouseup =''clickRemove（event）; removeRow（）;''
title =''点击可从列表中删除当前所选项目''>
< IMG src =''images / delete-icon.gif''style =''height：12px; vertical-align：中间;''
/>
< SPAN style =''vertical-align：middle; ''>& nbsp;删除< / SPAN>
< / DIV>
功能clickRemove（evt）
{
src =（evt.target）？ evt.target：evt.srcElement
while（src.tagName！=" DIV"）
src = src.parentNode
var tempLeft = src.style.borderLeftColor
var tempTop = src.style.borderTopColor
src.style.borderLeftColor = src.style.borderRightCol or
src.style.borderTopColor = src.style.borderBottomCol或
src.style.borderBottomColor = tempTop
src.style.borderRightColor = tempLeft
}
Hey all,
I''ve got a button that I am making with a DIV tag (so that I can customize
it more than is possible with the BUTTON tag) and I want to be able to make
it look inset when I click the mouse button down, and back to outset when I
let go of the mouse. I am using a solid border-style and just changing the
colors around (once again to get customized border colors)
when the mouse button goes up or down. That way when this function gets
called the first time (mousedown) the colors of the top and left will get
swapped with the colors from the bottom and right, thus giving the inset
appearance. My problem is that for some reason the
obj.style.borderLeftColor, etc properties are returning blank. Any ideas
why? The CSS and HTML for the DIV tag are given below as well as the
Javascript code for the mousedown/mouseup events.
..cartBtnRemove
{
font-family:arial;
font-size:10pt;
font-weight:bold;
cursor:default;
width:85px;
padding-top:2px;
padding-bottom:2px;
border:2px solid;
border-color:#F5F5DC black black #F5F5DC;
margin-bottom:5px;
background-color:lightgrey;
text-align:center;
}
<DIV class=''cartBtnRemove'' onmousedown=''clickRemove(event)''
onmouseup=''clickRemove(event);removeRow();''
title=''Click to remove the currently selected item from the list''>
<IMG src=''images/delete-icon.gif'' style=''height:12px;vertical-align:middle;''
/>
<SPAN style=''vertical-align:middle;''> Remove</SPAN>
</DIV>
function clickRemove(evt)
{
src = (evt.target) ? evt.target : evt.srcElement
while (src.tagName!="DIV")
src=src.parentNode
var tempLeft=src.style.borderLeftColor
var tempTop=src.style.borderTopColor
src.style.borderLeftColor=src.style.borderRightCol or
src.style.borderTopColor=src.style.borderBottomCol or
src.style.borderBottomColor=tempTop
src.style.borderRightColor=tempLeft
}
推荐答案
为什么不只是在边框样式的插入和开始之间切换？播放代码：
< div style =" border：2px solid blue; border-style：outset;
宽度：50px;身高：50px"
onmousedown =" this.style.borderStyle =''inset'';"
onmouseup =" this.style.borderStyle ='' outset'';">
< / div>
[...]
-
Rob
Why not just toggle between border-style inset and outset? Play code:
<div style="border: 2px solid blue; border-style: outset;
width: 50px; height: 50px"
onmousedown="this.style.borderStyle=''inset'';"
onmouseup="this.style.borderStyle=''outset'';">
</div>
[...]
--
Rob
Aggggh，当然更整洁的是：
< div style =" border： 2px一开始蓝色;宽度：50px;身高：50px
onmousedown = ...
[...]
Aggggh, of course even neater is:
<div style="border: 2px outset blue; width: 50px; height: 50px"
onmousedown=...
[...]
-
Rob
--
Rob
因为我想为所有四个边框设置自己的自定义颜色，因此使得
插入/开始的borderStyle值无论如何都没用。
Because I want my own custom colors for all four borders, thus making the
inset/outset borderStyle values useless anyways.
这篇关于borderColor属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！