<html>
<body>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
<style type="text/css">
p.first {color:green}
p.second {color:blue}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
</body>
</html>
浏览器应该如何呈现不连续的css？是否应该使用页面上的所有css样式生成一些数据结构并使用它进行渲染？
或者它按照它看到的顺序使用样式信息进行渲染？
假设我有一个Angular2组件
//home.component.ts
import { Component } from 'angular2/core';
@Component({
selector: "home",
templateUrl: "app/components/templates/home.component.html",
styleUrls: ["app/components/styles/home.component.css"]
})
export class HomeComponent {
public width: Number;
public height: Number;
}
此组件的模板html文件
//home.component.html
<div class="home-component">Some stuff in this div</div>
最后是这个组件的css文件
//home.component.css
.home-component{
background-color: red;
width: 50px;
height: 50px;
}
正如您所看到的,该类中有2个属性,width和height.我希望宽度和高度的css样式与width和height属性的值匹配,当属性更新时,div更新的宽度和高度.完成此任务的正确方法是什么？
我们正在制作一个Angular2应用程序,我们希望能够以某种方式创建一个全局CSS变量(并在分配变量时更改属性的值).
我们使用了Polymer一段时间(现在我们正在切换到Angular2组件)并且我们使用了CSS属性(Polymer有一些polyfill),我们只使用了更新样式Polymer.updateStyles().
有什么方法可以实现类似的功能吗？
编辑:
我们想要类似于Sass color: $g-main-color或CSS自定义属性的东西color: var(--g-main-color),每当我们决定更改属性的值时,例如updateVariable('g-main-color', '#112a4f')它会动态地更新所有值的值.所有这一切都在应用程序运行时.
编辑2:
我想在我的CSS的不同部分(host,child element ...)中使用一些全局CSS变量,并且能够立即更改值 - 所以如果我更改my-color变量,它会在应用程序的任何位置发生变化.
我将使用Sass语法为例:
:host { border: 2px solid $my-color }
:host .some-label { color: $my-color }
可以使用Angular管道之类的东西吗？(但它应该只适用于HTML)
:host { border: 2px solid {{ 'my-color' | cssvariable }} }
:host .some-label { color: {{ 'my-color' | cssvariable }} }
我正在使用 ionic 3 构建混合移动应用程序，要求之一是用户能够动态更改工具栏颜色。页面渲染后，html 如下所示：
<div id="divICanControl"> //this div i can control
<div> //but this one is generated by the framework and this is the div that change the background color of the toolbar
</div>
</div>
我尝试执行以下操作：
document.getElementById('divICanControl').childNodes[0].style.backgroundColor = this.someColor;
它偶尔可以工作，但它在 vscode 中创建了以下错误：
[ts] Property 'style' does not exist on type 'Node'.
它停止了应用程序的构建。
我现在正在寻找使用角度操纵 dom 的正确方法。
感谢您的帮助，请记住我是 Angular 5 和 TypeScript 的新手。
angular ×3
css ×2
angular-dart ×1
dart ×1
dom ×1
html ×1
ionic3 ×1
javascript ×1
typescript ×1