content1.innerHTML = "洪闸类型名称:" + this.mapContent.gtclstype+ "<br>" + // "终点位置:" + this.mapContent.dkep + "<br>" + " 管理单位:" + this.mapContent.munit +"<br>" + // " 洪闸类型编号:" + this.mapContent.gtcls +"<br>" + " 孔数:" + this.mapContent.hmt + "个" + "<br>" + " 闸孔宽度:" + this.mapContent.gtw + "米" + "<br>" + " 闸孔高度:" + this.mapContent.gth + "米" + "<br>" + " 进洪闸开启水位:" + this.mapContent.openz + "米" + "<br>" + " 进洪控制站:" + this.mapContent.in_control_station + "<br>" + " 设计进洪流量:" + this.mapContent.dq + "米" +"<br>" + " 设计退洪流量:" + this.mapContent.rdq +"米" + "<br>"+ " 调度规则:" + this.mapContent.opru + "<br>"+我想分开设置不同的样式呢,比如洪闸名称这样的文字一个样式,值一个样式
时间: 2024-03-15 10:45:47 浏览: 48
你可以使用 HTML 标签将不同的部分包裹起来,然后分别为它们设置样式。
例如,在洪闸类型名称和它的值之间添加一个 `<span>` 标签,并为这两个部分分别设置不同的类名:
```javascript
content1.innerHTML = "洪闸类型名称:<span class='name'>" + this.mapContent.gtclstype+ "</span><br>" +
"管理单位:<span class='unit'>" + this.mapContent.munit +"</span><br>" +
"孔数:<span class='count'>" + this.mapContent.hmt + "个</span><br>" +
// 其他部分省略
```
然后在 CSS 文件中分别定义这些类的样式:
```css
.name {
font-weight: bold;
color: red;
}
.unit {
font-style: italic;
}
.count {
font-size: 18px;
}
```
这样就可以分别为不同的部分设置样式了。
相关问题
content1.innerHTML = "洪闸类型名称:" + this.mapContent.gtclstype+ "<br>" + // "终点位置:" + this.mapContent.dkep + "<br>" + " 管理单位:" + this.mapContent.munit +"<br>" + // " 洪闸类型编号:" + this.mapContent.gtcls +"<br>" + " 孔数:" + this.mapContent.hmt + "个" + "<br>" + " 闸孔宽度:" + this.mapContent.gtw + "米" + "<br>" + " 闸孔高度:" + this.mapContent.gth + "米" + "<br>" + " 进洪闸开启水位:" + this.mapContent.openz + "米" + "<br>" + " 进洪控制站:" + this.mapContent.in_control_station + "<br>" + " 设计进洪流量:" + this.mapContent.dq + "米" +"<br>" + " 设计退洪流量:" + this.mapContent.rdq +"米" + "<br>"+ " 调度规则:" + this.mapContent.opru + "<br>"想设置样式怎么做,或者说给一个类名控制
要设置样式,你可以使用 `style` 属性,像这样:
```javascript
content1.style.color = "red";
content1.style.fontSize = "16px";
```
如果想要使用类名来控制样式,可以在 CSS 文件中定义类,并使用 `classList` 属性来添加或删除类名,像这样:
```css
.my-class {
color: red;
font-size: 16px;
}
```
```javascript
content1.classList.add("my-class");
```
这样就可以将 `content1` 元素的样式设置为 `my-class` 类定义的样式。
阅读全文