css的styleSheets模块

html-css022

css的styleSheets模块,第1张

1 .在css中，我们给属性设置值的时候，不需要考虑值的类型，但是在js中，必须为字符串（普通字符串，模板字符串），必须写全，声明中包含的单位必须完整的包含进去。

2 .想通过js设置css属性一定要查css名称对应的脚本属性。stylefloat

3 .style.cssText:获取所有的全部style属性

4 .getAttribute('style'):效果和上面等同

1 .修改元素的style属性

2 .修改元素的class或id

3 .插入样式标签

4 .改变页面的导入的样式表或者改变样式表

5 .className+='newClassName'

6 .className.replace(reg,'newClassName')

1 .app.style.width

1 .ie:app.currentStyle.width:

2 .document.defaultView.getComputedStyle(app,null).width:null-是否要取到伪类

3 .cssStyleSheet:获取一个页面引入的文件的数组

4 .cssStyleRuler:一个样式表里面所有的属性。

一些公用的class名称，没有特定的含义，比如我可以任意定义.first:height:10px当我要用到定义一个div高度为10px的时候我就可以直接引用了，像hd、bd之类的，都是个人平时写css时候的一些习惯，first、last、main、side这些class的定义都基本和英文的意思差不多，翻译过来就是第一个，最后一个，主要的，附加的，然后定义其css的时候也基本按它的意思写，比如main我们就可以定义一些全局的css，全局字体大小，样式，全局的字体颜色，超链接颜色之类的。

希望能帮到你！

ElementUI的弹窗实现步骤条，步骤1，步骤二。

1.使用组件 el-steps,里面有上一步和下下一步的方法

2.控制组件 的显示v-show 或者v-if

3.在他们的方法里面改变显示的状态

4.点击一下一步切换显示的表单

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<link href="static/css/admin.css" rel="stylesheet" type="text/css">

<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">

<link href="static/css/personal.css" rel="stylesheet" type="text/css">

<link href="static/css/systyle.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<link rel="stylesheet" href="static/css/bootstrap.css" />

<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>

<!-- 引入样式 -->

<!-- 引入 layui.css -->

<link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">

<!-- 引入 layui.js -->

<script src="//unpkg.com/layui@2.6.5/dist/layui.js">

<script type="text/javascript" src="static/js/bootstrap.js" ></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js">

</script>

</head>

<body>

<div id="container">

<div class="m-order" style="margin-bottom: 0pxheight: 160px">

<div class="s-bar" style="height: 29px"><i class="s-icon"></i>衣服列表

<a @click="queryByStatus(0)" class="i-load-more-item-shadow">全部衣服</a>

</div>

<ul>

<li style="width: 25%">

<a @click="queryByStatus(1)"><i><img src="static/images/send.png"></i><span>男上装<em class="m-num"

style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(2)"><i><img src="static/images/receive.png"></i><span>男下装<em class="m-num"

style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(3)"><i><img src="static/images/comment.png"></i><span>女上装<em class="m-num"

style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i><span>女下装<em class="m-num"

style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(5)"><i><img src="static/images/comment.png"></i><span>童装专区<em

class="m-num" style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i><span>鞋靴<em class="m-num"

style="display: none">0</em></span></a>

</li>

<li style="width: 25%">

<a @click="queryByStatus(7)"><i><img src="static/images/comment.png"></i><span>箱包<em class="m-num"

style="display: none">0</em></span></a>

</li>

</ul>

</div>

<div class="box-container-bottom" style="margin-bottom: 15px"></div>

<div class="m-logistics">

<!--<div class="s-bar" ><i class="s-icon"></i></div>-->

<div class="s-content">

<ul class="lg-list"></ul>

<el-button type="danger" size="small" @click="add" style="float: right">新增商品</el-button>

<table class="table" style="height: 5px">

<tr>

<td width="5%">序号</td>

<td width="20%">商品名</td>

<td width="10%">类别</td>

<td width="10%">销量</td>

<td width="20%">上架时间</td>

<td width="20%">更新时间</td>

<td width="20%">操作</td>

</tr>

<template v-for="product,index in products">

<tr>

<td>{{index+1}}</td>

<td>{{product.productName}}</td>

<td>{{product.categoryName}}</td>

<td>{{product.soldNum}}</td>

<td>{{product.createTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>

<td>{{product.updateTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>

<td>

<template>

<button class="btn btn-danger btn-xs" @click="changeClothesinfo"

:data-id="index">修改</button>

<button class="btn btn-danger btn-xs" @click="deleteClothes"

:data-id="index">下架</button>

</template>

</td>

</tr>

</template>

<tr>

<td colspan="5">

<!--分页 -->

<el-pagination background layout="prev, pager, next" :current-page="pageNum"

:page-size="limit" :total="count" @current-change="pager"></el-pagination>

</td>

</tr>

</table>

<!-- 弹窗,新增 -->

<el-dialog v-dialogDrag title="商品添加页面" :visible.sync="dialogFormVisible" class="dialog"

custom-class="dialogs">

<el-steps :space="800" :active="active" finish-status="success">

<el-step title="步骤 1">

</el-step>

<el-step title="步骤 2"></el-step>

</el-steps>

<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" v-show="show">

<h2 style="text-align: center">商品信息添加</h2>

<el-form-item label="商品名：">

<el-input v-model="product1.productName"></el-input>

</el-form-item>

<el-form-item label="指导价：">

<el-input v-model="product1.productPrice"></el-input>

</el-form-item>

<el-form-item label="一级分类名称：">

<el-select v-model="product1.rootCategoryId" filterable placeholder="请选择">

<el-option v-for="item in options" :key="item.value" :label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="二级分类名称：">

<el-select v-model="product1.categoryId" filterable placeholder="请选择">

<el-option v-for="item in options" :key="item.value" :label="item.label"

:value="item.value">

</el-option>

</el-select>

</el-form-item>

<el-form-item label="细节大图:" labe-width="100">

<el-input type="file" v-model="product1.content"></el-input>

</el-form-item>

<el-form-item label="原价:" labe-width="100">

<el-input v-model="product1.originPrice"></el-input>

</el-form-item>

<el-form-item label="尺码:" labe-width="100">

<div style="margin: 15px 0"></div>

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">

<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>

</el-checkbox-group>

</el-form-item>

<el-form-item label="库存:" labe-width="100">

<el-input v-model="product1.saveNum"></el-input>

</el-form-item>

</el-form>

<el-form label-width="100px" :model="formLabelAlign" v-show="!show">

<h2 style="text-align: center">商品参数信息添加</h2>

<el-form-item label="品牌：">

<el-input v-model="product1.productBrand"></el-input>

</el-form-item>

<el-form-item label="适合年龄:">

<el-input v-model="product1.applicableAge"></el-input>

</el-form-item>

<el-form-item label="面料：">

<el-input v-model="product1.productFabric"></el-input>

</el-form-item>

<el-form-item label="图案：" labe-width="100">

<el-input v-model="product1.productPattern"></el-input>

</el-form-item>

<el-form-item label="袖型:">

<el-input v-model="product1.sleeveType"></el-input>

</el-form-item>

<el-form-item label="袖长:">

<el-input v-model="product1.clothingLength"></el-input>

</el-form-item>

<el-form-item label=" 衣长：">

<el-input v-model="product1.sleevLength"></el-input>

</el-form-item>

<el-form-item label="颜色分类：">

<el-input v-model="product1.productColor"></el-input>

</el-form-item>

<el-form-item label=" 年份季节:" labe-width="100">

<el-radio-group v-model="product1.radio">

<el-radio :label="1">春天</el-radio>

<el-radio :label="2">夏天</el-radio>

<el-radio :label="3">秋天</el-radio>

<el-radio :label="4">冬天</el-radio>

</el-radio-group>

</el-form-item>

<el-el-form-item style="float: right">

<el-button @click="cancel">取消 </el-button>

<el-button type="danger" @click="saveProduct(product1)">保存</el-button>

</el-el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button style="margin-top: 12px" @click="pre">上一步</el-button>

<el-button style="margin-top: 12px" @click="next">下一步</el-button>

</div>

</el-dialog>

<div id="wrap" class="wrap">

</div>

</div>

</div>

</div>

<script type="text/javascript" src="static/js/cookie_utils.js"></script>

<script type="text/javascript" src="static/js/axios.min.js"></script>

<script type="text/javascript" src="static/js/vue.js"></script>

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript" src="static/js/base.js"></script>

<script type="text/javascript">

var cityOptions = ['XL', 'M',"L"]

var layer

layui.use('layer', function(){

layer = layui.layer

})

var v = new Vue({

el:"#container",

data:{

// ------商品尺码

checkAll: true,

checkedCities: ['XL', 'M'],

cities: cityOptions,

isIndeterminate: true,

// ----------

// 一级分类

options: [{

value: '选项1',

label: '黄金糕'

}, {

value: '选项2',

label: '双皮奶'

}, {

value: '选项3',

label: '蚵仔煎'

}, {

value: '选项4',

label: '龙须面'

}, {

value: '选项5',

label: '北京烤鸭'

}],

value: '',

// ----

radio: 3,

dialogFormVisible:false,

show:true,

product1:{ },

active: 0,

token:"",

pageNum:1,

limit:5,

userId:"",

products:[],

count:0,

status:0,

keyword:""

},

created:function(){

this.token = getCookieValue("token")

this.userId = getCookieValue("userId")

//1.加载页面，请求订单信息

var url1 = baseUrl+"admin/manageclothes"

axios({

url:url1,

method:"get",

headers:{

token:this.token

},

params:{

pageNum:this.pageNum,

limit:this.limit,

status:this.status,

keyword:this.keyword,

}

}).then((res)=>{

console.log(res.data.data)

if(res.data.code == 10000){

this.products = res.data.data.list

this.count = res.data.data.count

}

})

},

methods:{

// 保存商品

saveProduct(productVO){

console.log(productVO,"product1-------")

var url5=baseUrl+""

axios({

url:url5,

method:"POST",

data:productVO

}).then(res=>{

ELEMENT.Message.success("添加地址成功")

this.disabled=true

})

},

handleCheckAllChange(event) {

this.checkedCities = event.target.checked ? cityOptions : []

this.isIndeterminate = false

},

handleCheckedCitiesChange(value) {

let checkedCount = value.length

this.checkAll = checkedCount === this.cities.length

this.isIndeterminate = checkedCount >0 &&checkedCount <this.cities.length

},

cancel(){

this.dialogFormVisible = false

},

add(){

this.show = true

this.dialogFormVisible = true

},

next() {this.show = false

if (this.active++ >2) this.active = 0

},

pre() {this.show = true

if (this.active-- <0) this.active = 0

},

pager:function(page){

this.pageNum = page

//1.加载页面，请求订单信息

var url1 = baseUrl+"admin/manageclothes"

var obj = {

pageNum:this.pageNum,

limit:this.limit,

keyword:this.keyword,

status:this.status

}

if(this.status!=null){

obj.status = this.status

}

axios({

url:url1,

method:"get",

headers:{

token:this.token

},

params:obj

}).then((res)=>{

console.log(res.data.data)

if(res.data.code == 10000){

this.products = res.data.data.list

this.count = res.data.data.count

}

})

},

queryByStatus:function(status){

this.pageNum = 1

this.status = status

console.log("插旗")

console.log(this.status)

var url1 = baseUrl+"admin/manageclothes"

/* var parm = {

"userId":this.userId,

"pageNum":this.pageNum,

"limit":this.limit,

"status":this.status

}*/

axios({

url:url1,

method:"get",

headers:{

token:this.token

},

//data: parm

params:{

userId:this.userId,

pageNum:this.pageNum,

limit:this.limit,

status:this.status

}

}).then((res)=>{

console.log(res.data.data)

if(res.data.code == 10000){

this.products = res.data.data.list

console.log(res.data.data.list.productName)

this.count = res.data.data.count

}

})

},

deleteClothes:function(event){

var index = event.srcElement.dataset.id

var pid = this.products[index].productId

var url = baseUrl+"admin/deleteclothes/"+pid

axios({

url:url,

method:"put",

headers:{

token:this.token

}

}).then((res)=>{

console.log("下架衣服测试")

//alert("取消成功！")

layer.msg("成功！")

window.location.href="admin-manageclothes.html"

})

},

changeClothesinfo:function(event){

var index = event.srcElement.dataset.id

var product = this.products[index]

localStorage.setItem("product",JSON.stringify(product))

window.location.href="admin-clothesinfo.html"

},

/* allOrder:function(){

this.pageNum = 1

//this.status = status

//console.log(this.status)

var url1 = baseUrl+"order/all"

var parm = {

"userId":this.userId,

"pageNum":this.pageNum,

"limit":this.limit,

"status":this.status

}

axios({

url:url1,

method:"get",

headers:{

token:this.token

},

//data: parm

params:{

userId:this.userId,

pageNum:this.pageNum,

limit:this.limit,

//status:this.status

}

}).then((res)=>{

console.log(res.data.data)

if(res.data.code == 10000){

this.orders = res.data.data.list

console.log("插旗")

console.log(res.data.data.list.productName)

this.count = res.data.data.count

}

})

}, */

}

})

</script>

</body>

</html>