css中behavior属性用法说明

本文详细介绍了CSS中的Behavior属性及其用法,包括如何利用Behavior属性保存表单输入内容,以及如何通过Behavior属性调用外部HTC文件来为HTML元素添加交互行为。

css中behavior属性用法说明:
我们经常会遇到在刷新表单的时候,表单中的内容就丢失了,我们常用的方法是使用cookie,但那样有点麻烦,在css中有behavior属性可以为我们解决这个问题。下面就介绍一下behavior这个属性的用法:
behavior的语法:
behavior : url ( url ) | url ( #objID ) | url ( #default#behaviorName )
取值:
url ( url ) : 使用绝对或相对 url 地址指定DHTML行为组件(.htc)
url ( #objID ) : 使用二进制实现(作为 ActiveX? 控件)的行为。此处的 #objID 为 object 对象的 id 属性值
url ( #default#behaviorName ) : IE的默认行为。由行为的名称标识( #behaviorName )指定
说明:设置或检索对象的DHTML行为。多个行为之间用空格隔开。
当多个附加到同一要素的行为发生冲突时,其结果取决于行为应用于要素的顺序。后一个行为的优先权高于前一个行为。同样的规则适用于不同行为提供的属性、事件、方法所发生的名称冲突。
可以使用 addBehavior 方法动态的将行为附着到对象。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
务必注意使用样式表(CSS)的 behavior 属性内联定义或使用 addBehavior 方法附着的行为不会在对象从文档树中移除时被自动分离。而在文档中的样式表规则定义的行为会在对象从文档树中移除时被自动分离。
对应的脚本特性为 behavior 。
实例:
p { behavior: url(#default#download); }
div { behavior: url(fly.htc) url(shy.htc); }
div { behavior: url(#myObject); }
应用1:刷新也保留输入框里面的文字
.sHistory {}{behavior:url(#default#savehistory);}
应用2:调用脚本
<html>
<head>
<style>
   h1 { behavior: url(behave.htc) }
   </style>
</head>
<body>
    <h1>把鼠标放在这里 http://www.phpzixue.cn/</h1>
</body>
</html>
  behave.htc
<component>
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script type="text/javascript">
function hig_lite()
{
   element.style.color=255
}
function low_lite()
{
   element.style.color=0
}
</script>
</component>  
注意:CSS 时尽量避免使用Behaviors技术
Internet Explorer Behaviors
它是什么?Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。
只有 Internet Explorer 支持 behavior 属性。
尽量使用 JavaScript 和 HTML DOM 代替它.

 

*.htc

 

<PUBLIC:COMPONENT ID="summerSelectObj" lightWeight="false" literalContent="true" NAME="summerSelectObj" supportsEditMode="false">
<PUBLIC:DEFAULTS canHaveHTML="true" contentEditable="false" tabStop="true"/>
<PUBLIC:PROPERTY ID="propData" NAME="data" PUT="setData" GET="getData"/>
<PUBLIC:attach  event="ondetach" onevent="cleanup()" />
<PUBLIC:attach event="oncontentready" onevent="fnInit()"/>
<PUBLIC:attach event="onfocus" onevent="fnMrShow()"/>
<PUBLIC:attach event="onblur" onevent="fnBlur()"/>
<PUBLIC:attach event="onclick" onevent="fnMrShow()"/>
<PUBLIC:attach event="onkeydown" onevent="fnKeyDown()"/>
<PUBLIC:attach event="onchange" onevent="fnOnchange()"/>
<PUBLIC:method   name="setValue"/>
<PUBLIC:method   name="setData"/>
<PUBLIC:method   name="fnFind"/>
<PUBLIC:method   name="fnInit"/>
<PUBLIC:method   name="fnIsClick"/>
<PUBLIC:method   name="fnGetLstStr"/>
<PUBLIC:method   name="fnMySort0"/>
<PUBLIC:method   name="fnMySort"/>
<PUBLIC:method   name="fnMySort2"/>
<PUBLIC:method   name="fnSortShow"/>
<PUBLIC:method   name="fnShowPopWin"/>
<PUBLIC:method   name="fnPropertyChange"/>
<PUBLIC:method   name="fnKeyDown"/>
<PUBLIC:method   name="fnClick"/>
<PUBLIC:method   name="fnAddFilter"/>
<PUBLIC:method   name="fnGetDescAndHidObj"/>
<PUBLIC:method   name="fnGetValue"/>
<PUBLIC:method   name="fnInitXml"/>
<PUBLIC:method   name="fnAjaxCb"/>
<PUBLIC:method   name="setInputRegExp"/>
<PUBLIC:method   name="createXMLHttpRequest"/>
<PUBLIC:method   name="fnGetAjaxData"/>
<PUBLIC:attach event="onpropertychange" onevent="fnPropertyChange()"/>

 

JavaScript 中,`behavior` 属性通常用于控制元素在滚动或交互过程中的动画效果或行为模式。虽然 `behavior` 并不是 JavaScript 原生对象的直接属性,但在与 DOM 操作结合使用时,它可以作为配置项的一部分来影响元素的行为,尤其是在滚动动画、表单状态管理以及浏览器行为控制等方面。 ### 使用 `behavior` 控制滚动动画 在 JavaScript 中,可以通过 `scrollIntoView` 方法来控制元素滚动到可视区域的方式,其中 `behavior` 用于定义滚动是否平滑以及动画持续时间。`behavior` 支持以下取值: - `"auto"`:默认值,滚动无动画,立即跳转到目标位置。 - `"smooth"`:滚动过程带有平滑动画效果。 示例如下: ```javascript document.getElementById('myElement').scrollIntoView({ behavior: 'smooth' }); ``` 该方法适用于需要通过 JavaScript 控制页面滚动行为的场景,例如导航栏点击后平滑滚动到对应章节[^2]。 ### 使用 `behavior` 控制表单刷新后的行为 在 CSS 中,`behavior` 属性用于定义元素在页面中的行为表现,例如控制表单在刷新后是否保留输入内容。虽然 `behavior` 是 CSS 属性,但可以通过 JavaScript 动态修改其值以实现特定效果。例如,在旧版 Internet Explorer 中,某些行为(如 `url(#default#userdata)`)被用于持久化表单数据[^1]。 ```javascript document.getElementById('myForm').style.behavior = "url(#default#userdata)"; ``` 这种技术主要用于兼容性需求较高的项目中,现代开发中更推荐使用 `localStorage` 或 `sessionStorage` 来管理表单状态。 ### 使用 `behavior` 控制滚动边界行为 在处理滚动事件时,JavaScript 可以模拟 CSS 中 `overscroll-behavior` 的行为,通过监听滚动事件并阻止默认行为来控制元素滚动到边界时的行为。例如,阻止滚动事件冒泡到父元素,从而避免页面整体滚动: ```javascript document.getElementById('scrollContainer').addEventListener('wheel', function(e) { if ((this.scrollTop <= 0 && e.deltaY < 0) || (this.scrollHeight - this.scrollTop === this.clientHeight && e.deltaY > 0)) { e.preventDefault(); } }); ``` 该方法可以用于实现类似于 `overscroll-behavior: contain` 的效果,适用于自定义滚动组件或移动端交互设计[^3]。 ### 使用 `behavior` 控制 `<details>` 元素的交互行为 虽然 `<details>` 标签本身不直接使用 `behavior` 属性,但通过 JavaScript 可以动态控制其展开与收起状态,从而模拟某些行为控制逻辑。例如: ```javascript const details = document.getElementById('myDetails'); details.open = true; // 强制展开 details.addEventListener('toggle', function() { console.log('当前状态:', details.open); }); ``` 该方法适用于需要增强 `<details>` 元素交互体验的场景,例如在展开时加载额外内容或执行动画效果[^4]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值