使用button元素自定义别具风格的按钮

简介:
 我们都知道在Web里面定义一个按钮,最常用的方法就是使用INPUT元素的type='button'。但在 HTML spec 4.0里,增加了一个BUTTON元素,并且IE4.0就已经开始支持<BUTTON>了。顾名思义,它也是用来定义一个Web页按钮的,可是它却和<input type='...'>大不相同。

    BUTTON元素和INPUT元素最大区别是,BUTTON是一个容器(container)类型元素,它可以在内部包含合法的html代码,通过IE5.5提供的canHaveChildren和canHaveHTML属性,我们可以看到这两个属性都为 true。而INPUT元素不能在包含子元素和html代码,其canHaveChildren和canHaveHTML属性均为 false

    这样一来我们要制作带图片的按钮就变得非常的容易了,例如:
< button >< img  align ='absmiddle'  src ='/Emoticons/emnote.gif'>Sing Song </button >
将显示为:。

    带Mnemonic的Web页按钮:     
< button  accessKey ="B" ><u>B </u>otton </ button >
    ,当然这个不能自动执行,只能用Alt+B来focus它,要响应需要自己用JavaScript来控制。

    具有任意HTML内容的Button元素: 
    
    不过这种复杂的嵌入也有问题,虽然可以显示,不过内嵌元素的的事件却不能触发。

    不过BUTTON元素 不能在内嵌BUTTON元素,比如下例:
< button >
    Outer Button
     < button >
        Inner Button
     </ button >
</ button > 
    将显示为:
V
目录
相关文章
|
JavaScript 前端开发
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
12EasyUI 菜单与按钮- 创建分割按钮(Split Button)
87 0
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2782 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
2月前
|
前端开发
element菜单组件样式修改NavMenu导航菜单
本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式,包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例,并展示了如何将这些样式应用到实际的NavMenu组件中。
138 3
element菜单组件样式修改NavMenu导航菜单
|
2月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令,然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽,并提供最大化后的回调函数。具体使用方法详见示例代码。
242 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
|
3月前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
115 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
649 3
|
4月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
461 0
|
JavaScript 定位技术
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
996 0
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式?
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项)
295 0
|
C# 数据库
C# Button/SimpleButton (按钮) 动态赋值
C# Button/SimpleButton (按钮) 动态赋值
197 0
C# Button/SimpleButton (按钮) 动态赋值