动态生成的HTML标签样式问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了动态生成的HTML标签样式问题相关的知识，希望对你有一定的参考价值。
我有三个文件，.html、.js和.css。我的HTML标签是在js文件中用createElement动态生成的。我的问题是，怎么给动态生成的这些标签匹配css样式，我所有样式都写在.css文件中。
动态生成的HTML标签样式一般可以使用2中方式确定
1、在生成HTML时将样式直接以style=""写在标签上；也就是使用行内样式
例如：
//动态生成html时，给html赋值行内样式$("body").append("<div style='width:100px;height:100px;background:red;'>动态生成的div</div>");
2、预先定义好css样式，动态生成html时，将css类赋值给html
例：
/*定义css样式*/.content
width:100px;
height:100px;
background:red;
//在动态生成html时，将css样式赋值class
$("body").append("<div class='content'>动态生成html赋值class样式</div>");
总结：在动态生成html标签时，直接使用行内样式快捷，但不容易修改；使用预先定义好的css样式赋值html标签的class属性，容易修改；建议使用后者。
参考技术A 给你个例子自己看看吧，给生成的标签添加class属性，然后就和不是动态生成的一样了<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Temp Web Page</title>
<style type="text/css">
.li_classcolor:#f00;
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script text="text/javascript">
var div1=document.getElementById("div1");
var e_li = document.createElement("li");
var e_text=document.createTextNode("这里是text");
e_li.setAttribute("class","li_class");
e_li.appendChild(e_text);
div1.appendChild(e_li);
</script>
</html>追问
我的意思是，
.li_classcolor:#f00;
是写在.css文件中 ，不和HTML文件写在一起，而是通过标签引用进来的
把这个style加到引用的文件里不就可以了吗
参考技术B js:document.createElement("<input type='text' name='txtName' class='text-class'>");css: .text-classborder:0;
样式化组件动态标签名称
【中文标题】样式化组件动态标签名称【英文标题】：Styled Component dynamic tag name 【发布时间】：2019-02-05 04:30:59 【问题描述】：我想做一个动态组件。 （动态 TAG 将是一个样式化组件 -> 情感）
const Dynamic = ( tag: Tag, children, ...rest ) =>
<Tag ...rest>
children
</Tag>
该组件将是一个样式化的组件，例如：
const Column = styled(div)( color: 'red' )
const Row = styled(span)( color: 'yellow' )
这看起来很不错，而且工作正常，BUUUUUT：
当我尝试在另一个 DynamicComponent 中使用 DynamicComponent 时：
<DynamicComponent tag=Row>
mapOver.map(item=>
<DynamicComponent tag=Column/>
)
</DynamicComponent>
那么出于某种原因，动态子代将使用动态父代的样式。
有什么我遗漏的吗？
附注：
如果不使用动态样式，我会这样做：
<Row>
<Column/>
</Row>
那么样式、classNames、styled 标签就会被正确应用。
为了更清楚一点：
如您所见，DynamicComponent 将使用父级的样式、类名、样式标签...（不是我期望的行为）
【问题讨论】：
【参考方案1】：以下示例为 styled-component 创建动态标签名称：
// All headings use the same styled-component "Heading" function
const StyledHeading = styled.div`
font-size: $(level) => 4/level em; // <- dynamic font size
font-weight: 300;
margin: 0;
`
// the trick here is the "as=..." to create dynamic tag name
const Heading = (level = 1, children) =>
<StyledHeading as=`h$level` level=level>
children
</StyledHeading>
ReactDOM.render([
<Heading>Hello, world!</Heading>,
<Heading level=2>Title 2</Heading>,
<Heading level=3>Title 3</Heading>
] ,document.body
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.min.js"></script>参考：
"as" prop documentation【讨论】：
【参考方案2】：在使用 styled-components 时存在误解，因为标签旨在用作 HTML 标签（输入、div 等）。最好的方法是分别定义 StyledRow 和 StyledColumn 并以适当的名称使用它们。这也将有助于使您的代码更具可读性。
【讨论】：
有道理，我只是想看看别人是怎么看这种东西的。谢了哥们！ :)以上是关于动态生成的HTML标签样式问题的主要内容，如果未能解决你的问题，请参考以下文章