在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在html中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的。在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制、修改css中伪元素的方法。
例如,我的样式表有以下规则,需要把伪元素的content内容进行修改
<style>
p:after{content:'after伪元素'}
</style>
<p id="dome">正文内容</p>
<script>
document.onclick=function(){
var sty=document.createElement('style');
sty.innerText='p:after{content:\'修改一下\'}';
document.body.appendChild(sty);
};
</script>
我们直接创建一个style的标签。它的优缺点:
优点:任何字符串都可以动态插入到样式中。
缺点:原始风格不改变,只是重写; 反复使用document.createElement()可以使DOM量增加
添加一个重写的样式:
p.special:after {content: "修改一下";}
然后在js中这样操作它:
<script>
document.onclick=function(){
var p=document.getElementById('dome');
p.setAttribute("class","special");
};
</script>
我们使用setAttribute()能轻松地添加或删除这个类。这样实现的优缺点:
优点:易于实现; 能通过js迅速改变多种风格; 能使用样式在js中分离出去。
缺点: CSS必须预先写好,所以伪元素中内容不是完全动态的
我们可以在css中使用sttr()来读取一个特定的DOM属性,如果你浏览器支持伪元素就会支持css中使用attr()。
<style>
p:after {
content: attr(data-after);
}
</style>
<p id="dome">正文内容</p>
<script>
var p=document.getElementById('dome');
p.setAttribute("data-after","我是后缀");//初始值
document.onclick=function(){
p.setAttribute("data-after","修改一下");
};
</script>
在我们想换的内容不确定的时候,使用这个方法是非常值的推荐的。它的优缺点如下:
优点:不会创建无尽的额外风格
缺点: attr()在CSS中只能应用于内容字符串,而不能使用URL或RGB颜色
有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。
我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。
对于动态生成内容的网页,常常遇到需要判断元素是否存在的场景。在 jQuery 中使用一个不存在的元素完全不会报错,请放心大胆使用。
JavaScript中可以通过theForm、theForm.periodPerMonth、getElementById等方法判断元素是否存在。也可以使用Jquery的length属性来判断。
有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:
元素创建的三种方式:1. document.write(标签的代码及内容)2. 对象.innerHTML=标签及代码;3. document.createElement(标签的名字);
之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。
css()方法获取元素的宽高:css()方法返回的其实是getComputedStyle(node).width的值,也就是元素内容区的宽高;width() / height()这两个方法返回的也是元素内容区的宽高,但是不带单位
请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。前端面试中 HTML 的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的 HTML 语义化 ,今天就借此机会来谈谈可替换元素。
在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!