javascript基础--获取行内样式

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量170 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Mr-W/p/6474759.html
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
        //获取那个元素的样式
        //获取哪个样式
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        window.onload = function() {
            var oDiv = document.getElementById('div1')
            alert(getStyle(oDiv, 'width'));
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

 

转载于:https://www.cnblogs.com/Mr-W/p/6474759.html

Z19871124123456
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取元素样式-行内样式、内部样式、外部样式
个人博客
12-12 2624
js获取元素样式一、行内样式具体实现二、获取所有样式具体实现 一、行内样式 具体实现 在js获取到dom元素之后，使用其style属性即可获取到其所有的行内样式 <div id="div1" style="width: 100px; height: 200px"></div> const div1 = document.getElementById('div1'); console.log(div1.style); console.log('height:' + div1.st
JavaScript如何获取样式（行间）
wd
11-21 1300
前言：又接触了一些不知道的知识，真开心。下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！下面的样式都只适用于行间样式！！！1、cssText关于这个属性，大家应该都很属性。<div class="box" style="color: red;font-size: 34px;"> welcome </div> <script> window.onload = fun
js 获取行间样式
WangJiangNan17214的博客
08-31 463
获取行间样式     #div1{width:200px;height:200px;background:red;margin:20px;}       function getStyle(obj,name){        if(obj.currentStyle){         return obj.currentStyle[name];        }else{
Js获取/设置行内样式和非行内样式
weixin_30908103的博客
11-05 1062
1、获取行内（内嵌、行间）样式： 　　obj.style.attr;进行获取非行间样式。 2、设置行内样式： 　　obj.style.attr = value; 3、获取非行内样式： function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值 if(obj.currentStyle){ //针对ie获取非行...
javascript获取元素CSS样式代码示例
10-26
本文将详细介绍如何使用JavaScript获取元素的CSS样式信息，包括行内样式、内嵌样式、链接式样式和导入式样式。 首先，了解四种控制页面样式的常见方式： 1. 行内样式（内联样式）：直接在HTML标签中使用`style`属性...
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
12-10
众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单，通过element.style.attr（元素.style.属性...
postcss-pxtorem:使用PostCSS将像素单位转换为rem（根em）单位
04-06
postcss-pxtorem 的插件，可从像素单位生成rem单位。 安装 $ npm install postcss postcss-pxtorem --save-dev 用法 像素是最容易使用的单位（观点）。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。...
JavaScript的DOM_操作行内样式
06-20 140
一、检测浏览器是否支持css 　　CSS 作为(X)HTML 的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关，所以我们有必要检测当前浏览器支持CSS 能力的级别。 　　DOM1 级实现了最基本的文档处理，DOM2 和 DOM3 在这个基础上增加了更多的交互能力，这里我们主要探讨 CSS，DOM2 增加了 CSS 编...
js获取内联样式的方法
12-08
本文实例讲述了js获取内联样式的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/> <title>javascript 获取内联样式</title> </he
js获取html行内样式与外部样式、外联样式
weixin_46500485的博客
08-28 1552
js获取html行内样式与外部样式、外联样式 1.//获取行内样式 这种方法只能够获取行内样式 var box=document.getElementById("box"); console.log(box.style.width); 2.获取外部样式以及外联样式 (1)除IE外可有使用的方法 //调用getComputedStyle就可以得到计算后的样式 即外部样式以及外联样式 但是只可以在除IE浏览器之外的浏览器使用 var cssObj=window.getComputedStyle(box);
23 - JavaScript 通过style对象设置行内样式
热门推荐
JayYuen的博客
11-13 1万+
style属性的获取和修改 在DOM当中，如果想设置样式，有两种形式： className（针对内嵌样式） style（针对行内样式） 这篇文章，我们就来讲一下style。 需要注意的是：style是一个对象，只能获取行内样式，不能获取内嵌的样式和外链的样式。例如： <!DOCTYPE html> <html lang="en"> <head> ...
javascript基础练习-获取和设置行内样式
wz13759497175的博客
12-09 290
效果图如下: 代码部分如下: .box{ width: 300px; height: 100px; background: orange; margin: 0 auto; padding: 20px; color: white; transition: all 0.3s; } window.onload=fun
如何获取和设置行内样式
weixin_42143048的博客
02-12 1609
1、设置一个行内样式 function setCss(curEle,attr,val) { // opacity 在IE8及以下是不兼容的；所以要设置filter属性； if(attr === "opacity"){ curEle.style[attr] = val; curEle.style["filter"] =...
JS中提取行间样式
wusiye_123456的博客
05-15 241
其实在JS当中，大部分的函数都是没有名字的 window.onload 当页面加载完成后发生，它也是一个函数。 为元素添加事件，事件和其他属性一样，可以用JS添加。 window.onload的意义。 行为、样式、结构三者分离。 这个是提取后 <!DOCTYPE html> <html lang="en"> <head> <meta ...
原生JS添加行内样式
qq_41340792的博客
07-26 3644
设置行内样式 <div style="color: blue;>内容内容内容</div> var divEle = document.querySelector('div');//获取标签 var divStyle = divEle.style;//获取行内样式信息 通过style设置 style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息但不包含与外部样式，或嵌入式样式层叠而来的样式 divStyle.style.
从零开始前端学习[47]:如何使用javascript来操作行内样式或者属性浅析
章飞 _906285288的博客
11-09 2116
如何使用javascript来操作行内样式或者属性 使用javascript来操作行内样式，或者标签固有属性 提示 博主:章飞_906285288 博客地址：http://blog.csdn.net/qq_29924041 使用javascript来操作行内样式，或者标签固有属性我们知道，html是结构层，css是样式层，而js则是行为层，一个页面的样式控制主要是css来进行控制的，而
js基础——操作行内样式和对触发事件的理解
我的博客
08-04 1255
本文是对上一文"js基础"的补充 一、 操作行内样式 1. 上文说到:通过对象.style.属性名js只能操作行内样式。它实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过对象.style.属性名修改该属性的值，此时相当于给行内样式增加该属性，并赋值。当该对象的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式，故最终会应用新的值 &lt...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1347
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
《深入理解JavaScript-ECMAScript、DOM和BOM》
它定义了JavaScript的语法、基本数据类型、控制结构和对象等核心内容，是JavaScript开发的基础，确保了不同浏览器之间的兼容性。 DOM则定义了访问和操作网页上的元素的接口，可以通过JavaScript动态地改变网页的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值