元素样式、属性

1. float样式

获取元素的样式,基本的语法是:element.style.属性,当遇到属性中有“-”连字符时,需要用驼峰命名来代替。

由于float是javascript的保留字,我们无法使用object.style.float来获取样式,

//IE
document.getElementById("元素ID").style.styleFloat = "left";

//W3C
document.getElementById("元素ID").style.cssFloat = "left";

2. 计算样式

通过使用element.style.属性,我们只能获取到元素的内联样式,有时候,我们需要获取元素所有最终的样式,“计算样式”。

var elm = document.getElementById("元素ID");
var myStyle;

//IE
myStyle = elm.currentStyle.backgroundColor

//W3C
var myComputedStyle = document.defaultView.getComputedStyle(elm, null);
myStyle = myComputedStyle.backgroundColor;

3. label的for属性

var elm = document.getElementById(‘元素ID‘);
var labelFor;

//IE
labelFor = elm.getAttribute(‘htmlFor‘);

//W3C
labelFor = elm.getAttribute(‘for‘);

4. 光标位置

//IE
event.clientX
event.clientY

//Firefox
event.pageX
event.pageY

5. alpha透明

经常用来设置元素淡入淡出效果,需要通过设置alpha来实现。

CSS

.elm {

    /*IE*/
    filter: alpha(opacity=50);

    /*W3C*/
    opacity: 0.5;

}

JS

var elm = document.getElementById(‘元素ID‘);

//IE
elm.style.filter = ‘alpha(opacity=50)‘;

//W3C
elm.style.opacity = ‘0.5‘;
时间: 2025-01-06 19:49:18

元素样式、属性的相关文章

JavaScript 获取元素样式属性以及兼容代码封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 300px; height: 200px; background-color: pink; left: 100px; } <

jQuery学习之------元素样式的操作

jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名 <head> <style> /*css样式代码*/ .soulsjie{ background:red; } .newstyle{ height:100px; width:100px; } .newsty2{ font-size:16px; } </style>

DOM元素选择 属性操作 事件操作 节点操作 创建元素的区别

DOM 获取页面元素 document.getElementById('id'); // id 选择器 document.getElementsByTagName('div'); // 标签选择器 返回伪数组 // html新增 document.getElementsByClassName('box'); // 类名学则器 document.querySelector('#id'): // 返回指定选择器的第一个元素对象,里面写css选择器 document.querySelectorAll(

jQuery学习笔记(4)-设置元素的属性和样式

一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/logo_small.gif" class="img_logo" /> 2.分析代码 元素属性src:/images/logo_small.gif 元素属性class:img_logo DOM属性currentSrc:http://localhost/images/logo_s

使用jQuery操作元素的属性与样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!

获取指定元素的某一个样式属性值

1."元素.style.样式属性名" ->oDiv.style.height 弊端:"只能"获取在"行内"上编写过的样式,不管在哪些了对应的样式,只要没有在行内上写过,都获取不到 oDiv.style.height 由于height并没有写在行内样式上(写在样式表里了),所以获取的结果依然是"" 2.通过 window.getComputedStyle 获取所有经过浏览器计算的样式(只要的你的元素在浏览器加载的时候渲染过

jQuery操作元素的属性与样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

JQuery操作元素的属性与样式及位置 复制代码

<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> <script type="text/javascript" defer> //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作