1.操作元素的css样式 ---只能操作行内样式
//通过今天这种语法操作css样式是,css属性必须要转换成JS的格式
//如果css属性 是由一个单词构成的,就直接书写即可
//如果 css属性 中有连接符(-)连接,则需要将连接符后的单词首字母大写,连接符去掉
border-width 写成 borderWidth
text-align 写成 textAlign
font-size 写成 fontSize
animation-timing-function 写成 animationTimingFunction
1.获取:
//语法:元素对象.style.css属性名
console.log(oBox.style.width);//'400px'
console.log(oBox.style.height);//'300px'
console.log(oBox.style.border);//'10px'
console.log(oBox.style.borderWidth);//'10px'
console.log(oBox.style.textAlign);//'center'
3.设置
//语法:元素对象.style.css属性名 = '属性值';
oBox.style.height = '200px';
oBox.style.color = 'blue';
oBox.style.borderWidth = '#00ff00';
oBox.style.fontSize = '70px';
2.获取标签的所有样式 --- cssText
console.log(oBox.style.cssText);
一次设置标签的多个属性样式 --- cssText
最终只会执行我们一次设置的多个属性的样式
原本拥有的样式会被重置
oBox.style.cssText = 'width:100px;height=100px;background-color:yellow;line-height:100px;fon-size:30px';
2.操作元素的css样式 ---操作非行内样式
获取非行内样式:高版本-低版本
1.针对高版本浏览器:
语法:getComputedStyle(ele,null/false)['attr'];
第一个参数;元素对象(ele)
第二个参数:书写null/false即可,不用管
中括号中书写:想要获取的css属性名(arrt)
var arrtrs1 = getComputedStyle(obox, null)['width'];
console.log(arrtrs1);// '400px'
var arrtrs2 = getComputedStyle(obox, null)['height'];
console.log(arrtrs2);// '400px'
var arrtrs3 = getComputedStyle(obox, null)['color'];
console.log(arrtrs3); // 'rgb(0, 128, 0)'
var arrtrs4 = getComputedStyle(obox, null)['border'];
console.log(arrtrs4); // '9.6px solid rgb(154, 205, 50)'
2.兼容ie6/7/8低版本浏览器:
语法:ele.currentStyle['arrt'];
var attr1 = obox.ariaCurrent['height'];
console.log('attr1'); // '400px'
console.log(window.getComputedStyle);
// 高版本浏览器访问到 getComputedStyle 函数
// ie6/7/8低版本浏览器访问到 undefined
//封装实现兼容获取非行内样式的方法:
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return getComputedStyle(ele, null)[attr];
} else {
return ele.currentSyle[arrt];
}
}
var a = getStyle(obox, 'color');
console.log(a);//rgb(135, 206, 235)
var b = getStyle(obox, 'text-align');
console.log(b);//center