【前端】设置好CSS样式动态添加元素会按照样式显示

这篇就是简单记录下一个小点：

设置好CSS样式先，然后动态生成元素，元素可以按照CSS样式显示，只要对应到相应的规则即可。

<!DOCTYPE html>
<html>
<head><title>Grid Layout Test</title><style type="text/css">.container {display: grid | inline-grid;}#red {color: red;}</style>
</head>
<body><div class="container"><!-- <div id="red">Test</div> --></div><script type="text/javascript">var container = document.getElementsByClassName('container'); // 返回一个数组var test = document.createElement('p');test.innerHTML = "HELLO WORLD";container[0].appendChild(test); // 不能用数组添加子结点，而必须是单个元素test.setAttribute('id', 'red');</script>
</body>
</html>

这是为后面提前设定好布局，然后动态生成元素做一下铺垫。

END.

【前端】设置好CSS样式动态添加元素会按照样式显示相关推荐

前端学习——纯CSS实现动态翻转导航条
纯CSS实现动态翻转导航条在学习动画的时候,一开始不知道写一个生命东西来进行学习,后来在网上看到了一些CSS实现的动画效果,觉得很酷炫,就在其中选了导航条来进行学习,导航条比较基础而且用的比较多,以 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
目录 1.jquery操作样式类名代码演示二.添加元素 1.append()演示 2.prepend()演示 3.after()演示 4.before()演示三.jQuery-CSS()方法 1 ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
css 鼠标悬浮样式_【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
设置全局css/less/sass样式and优化与style-resources-loader的理解
css全局样式设置问题描述:一个项目往往是有非常多的界面组成,当我们在编写代码的时候,这些界面就会有很多重复使用的/公共的样式重叠.这时候,可以将这些样式抽离出来放在一个共享文件里,将样式作用到各个 ...

【前端】设置好CSS样式动态添加元素会按照样式显示

【前端】设置好CSS样式动态添加元素会按照样式显示相关推荐

最新文章

热门文章