首页 > 其他分享 >CSS的htc文件对于脚本生成的html无效的处理方法

CSS的htc文件对于脚本生成的html无效的处理方法

时间:2023-08-28 10:35:27浏览次数:48  
标签:htc PIE window html radius addBehavior CSS


最近用PIE.htc开发CSS3的网页时,发现用到PIE.htc的CSS效果对于用脚本生成的html代码都无效的情况

众所周知htc是IE针对CSS开放的一种特殊实现方式


htc的实现是在页面载入完成后开始的,类似于js的window.onload(),它并不是像CSS语言那样,成为浏览器原生的语言,所以当页面内容使用js生成时,其他css效果都会展现,唯独htc的效果不会出现,因为此时它已经过了执行时间了

 

因此,需要让htc效果继续出现,就要用js操纵一次,让htc再次执行一遍。

IE为此专门为DOM节点添加了一个addBehavior方法,用于执行htc文件的。

 

具体使用方法如下:

 

原本的CSS代码:

 


#b {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/PIE.htc);
}


 

 

插入html并使htc执行的jQuery代码:

 


$(window.body).append('<div id="b"></div>');
$('#b').get(0).addBehavior('/PIE.htc'); 
// 或 document.getElementById('b').addBehavior('/PIE.htc');

 

建议在执行addBehavior前,先判断下浏览器是否支持该方法,如:

 

if(window.body.addBehavior){
    document.getElementById('b').addBehavior('/PIE.htc');
}

标签:htc,PIE,window,html,radius,addBehavior,CSS
From: https://blog.51cto.com/u_16237557/7260844

相关文章

  • HTML5客户端数据存储
    HTML5使在不影响网站性能的情况下存储大量数据成为可能。之前,这些都是由cookie完成的,cookie不适合大量数据的存储,因为会影响速度。举个例子:varobj={x:1};//例1localStorage.obj=obj;//不能直接存储非字符串类型alert(localStorage.obj.x);//undefinedlocalStorage.......
  • CSS3新增内容
    CSS3新增内容css3新增内容布局方面新增了flex布局、媒体查询选择器方面新增了:first-of-type,:nth-child等选择器盒模型方面添加了box-sizing来改变盒模型,动画方面增加了animation,2d变换,3d变换等颜色方面添加透明,rbga等字体方面允许嵌入字体和设置字体阴影......
  • Django-HTML 中设置图片jquery 属性
    img代码如下<imgid="head-img"src="/static/blog/image/headimg.jpg.jpeg"style="height:100px;width:100px;">导入jquery 在HTML末尾加入以下代码<script>//找到头像的input标签绑定change事件$("#id_head_img").k(fu......
  • css语法
    CSS支持nvue样式css预处理器#页面样式与布局uni-app的css与web的css基本一致。本文没有讲解css的用法。在你了解web的css的基础之上,本文讲述一些样式相关的注意事项。uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生......
  • 学生信息登记表单的录入删除代码JS+HTML TOMCAT听课笔记
    <!DOCTYPEhtml><html><head></head><body><formclass="info"autocomplete="off">姓名:<inputtype="text"class="uname"name="uname"&......
  • Python HTML 的模板引擎 Jinja2
    PythonJinja2是一个用于生成动态HTML的模板引擎。它可以让你在HTML中使用Python的语法和逻辑,从而实现数据和视图的分离。本文将介绍PythonJinja2的基本用法和特性,以及一些实例和技巧。安装和导入要使用PythonJinja2,你需要先安装它。你可以使用pip命令来安装:pip......
  • HTML引入CSS的方式
    虽然很简单,但久了不用还是容易忘,暂且记一下:1、html引入css文件之直接在div中使用css样式制作div+css网页<divstyle="border:1pxredsolid;">html引入css文件</div>说明:html引入css文件的这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势,当然如果......
  • CSS-02
    选择器选择器可以快速、方便的选择所需要使用的页面元素基本选择器基础选择分三种,分别是:标签选择器、类选择器、id选择器标签选择器标签选择器主要是根据标签的名字进行元素的选择语法:标签名{}例如:div{color:red;font-size:20px;}<divclass="div-cls">昨日头条:国家公祭日</div><d......
  • CSS技术详解
    1CSS特性介绍随着数据中心数据访问量的逐渐增大以及网络可靠性要求越来越高,单台交换机已经无法满足数据中心大数据量访问的要求。为了满足数据中心大数据量转发的需求和网络高可靠性需求,提出了交换机堆叠。CSS是ClusterSwitchSystem的简称,又被称为集***换机系统(简称为CSS或......
  • 列举出css所有的样式选择器
    以下是CSS中常见的各种样式选择器:1.元素选择器:通过HTML元素名称选择元素,如`p`、`div`等。2.类选择器(ClassSelector):通过`class`属性选择一个或多个具有相同类名的元素,如`.example`。3.ID选择器(IDSelector):通过`id`属性选择具有唯一标识符的元素,如`#uniqueID`。4.......