Dart学习笔记(12):Dart和Web技术(CSS)

发表于2018-07-04 18:10 阅读(29)

Web技术无非就2点内容:
一个是HTML(包含上一章事件处理)
另一个是CSS(包括下一章的视觉特效)

本文地址:http://www.cndartlang.com/747.html

内容相近,重点就是获取并修改CSS数据
Dart里面有两种方法

1、将这些操作集中到了CssClassSet类中,如:

//添加样式
element.classes.add('selected');
//切换样式
element.classes.toggle('isOnline');
//删除样式
element.classes.remove('selected');
//清空样式
element.classes.clear();

2、通过CssStyleDeclaration类显式声明,如:

//设置backgroundColor
element.style.backgroundColor= '#459fc2';
//设置color
element.style.color= '#fff';
//设置fontSize
element.style.fontSize= '10pt';

需要注意的是,add、toggle、remove的参数是单一的样式
如果是多个样式,需要调用函数addAll、toggleAll、removeAll

下面是一个通过点击按钮来改变DOM样式的例子

main.css

body {
  background-color: #F8F8F8;
  font-family: '黑体';
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 80%;
  height: 50px;
  position:relative;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 14px;
}

.success {
  background: #E6EFC2 5px 5px;
  padding: 1em;
  padding-left: 3.5em;
  border: 2px solid #C6D880;
  color: #529214;
}

.error {
  background: #FBE3E4 5px 5px;
  padding: 1em;
  padding-left: 3.5em;
  border: 2px solid #FBC2C4;
  color: #D12F19;
}

.warning {
  background: #FFF6BF 5px 5px;
  padding: 1em;
  padding-left: 3.5em;
  border: 2px solid #FFD324;
  color: #817134;
}

.toggle {
  background: #cbe0f4 5px 5px;
  padding: 1em;
  padding-left: 3.5em;
  border: 2px solid #96b6d3;
  color: #286eae;
}

main.html

<!DOCTYPE html>

<html>
  <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Note 12</title>
    
    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
    
    <link rel="stylesheet" href="main.css">
  </head>

  <body>   
    <h1>Note 12</h1>
    
    <p>Hello world from Dart!</p>
    
    <div id="sample_container_id">
      <p id="sample_text_id">Click Button!</p>
    </div>
    
  </body>
</html>

main.dart

import 'dart:html';

void main() {
  // 获取用于显示框的DIV元素和显示文字的P元素
  var container = document.querySelector('#sample_container_id');
  var p = document.querySelector('#sample_text_id');
  
  // 新建按钮,并添加onClick的事件处理程序
  var btn1 = new ButtonElement()
  ..id = 'btn1'
  ..text = ' ERROR '
  ..onClick.listen((event){
    container.classes
    //清空样式
    ..clear()
    //添加样式
    ..add('error');
    p.text = 'This is an error message !';
  });
  
  var btn2 = new ButtonElement()
  ..id = 'btn2'
  ..text = 'ALERT'
  ..onClick.listen((event) {
    container.classes
    ..clear()
    ..add('warning');
    p.text = 'This is an alert message !';
  });
  
  var btn3 = new ButtonElement()
  ..id = 'btn3'
  ..text = 'OK'
  ..onClick.listen((event) {
    container.classes
    ..clear()
    ..add('success');
    p.text = 'This is an OK message';
  });
  
  var btn4 = new ButtonElement()
  ..id = 'btn4'
  ..text = 'Toggle'
  ..onClick.listen((event) {
    //切换样式
    container.classes.toggle('toggle');
    p.text = ' Toggle !';
  });
  
  // 将所有的按钮添加到document中
  document.body.nodes.addAll([btn1, btn2, btn3, btn4]);
}

运行结果:





Error、Alert和Ok三个按钮语法没什么区别
这里说一下Toggle按钮,用到了切换样式函数
element.classes.toggle(‘toggle’);

直白点来说,如果元素已经包含了样式value,那么函数会删除样式value
如果元素没有包含样式value,那么函数会添加样式value