borderColor属性 [英] borderColor properties

问题描述

嘿所有，


我有一个带有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;''>&nbsp;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
}

推荐答案

David写道：

嘿所有，

我有一个我使用DIV标签制作的按钮（这样我可以自定义它比使用BUTTON标签更多）并且我希望能够在我单击鼠标按钮时使其看起来像插入当我放开鼠标的时候，回到开始。我正在使用坚固的边框样式，只需更改

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

为什么不只是在边框样式的插入和开始之间切换？播放代码：


< 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

RobG写道：

David写道：

David wrote:

嘿所有，

我有一个带有DIV标签的按钮（这样我可以比BUTTON标签更多地定制它）我想要
为什么不只是在边框式插入和开始之间切换？播放代码：

< div style =" border：2px solid blue; border-style：outset;
宽度：50px;身高：50px"
onmousedown =" this.style.borderStyle =''inset'';"
onmouseup =" this.style.borderStyle =''outset'';">
< / div>

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

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>

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

RobG写道：

RobG wrote:

为什么不在边框式插图之间切换并且一开始？播放代码：

< div style =" border：2px solid blue; border-style：outset;
宽度：50px;身高：50px"
onmousedown =" this.style.borderStyle =''inset'';"
onmouseup =" this.style.borderStyle =''outset'';">
< / div>

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>

因为我想为所有四个边框设置自己的自定义颜色，因此使得

插入/开始的borderStyle值无论如何都没用。

Because I want my own custom colors for all four borders, thus making the
inset/outset borderStyle values useless anyways.

这篇关于borderColor属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！