js和jquery中获取非行间样式

2024-02-12 18:32:32

样式又分为了行间样式和非行间样式。一般来说行间样式用的是比较少的，因为它能够作用的范围就只有一个元素，而非行间样式的作用范围可以是一类元素（即拥有相同德标签，或者说是有相同的类名，(当然id名不可能相同，唯一性)

那么来说说在js和jquery中，有时候需要获取元素的样式，比如说width或者height，在这种情况下如何获取?

js中

1、行间样式：

相信大家无论是看书还是咋滴，都知道怎么获取行间样式吧，就是利用一个style：

这种利用style的方式获取的只能是行间样式。

2、非行间样式

此处我就直接上封装的函数了，就不在编辑器中编辑运行了

function getStyle(obj,attr)
{
    if(obj.currentStyle)
　　   {
        return obj.currentStyle[attr];
      }
    else
     return getComputedStyle(obj,null)[attr];//放null参数的那个地方放false也可以，只要带一个参数，值您任意，高兴就好。
 }

好了，就封装这么个简单的函数，在获取非行间元素的时候调用一下就ok了哦。（ps:比如说getStyle(oDiv,'width')）

jquery中

其实我以为在jquery中需要用跟js中一样的封装的那个函数；好吧，结果根本不用。直接用方法就ok

首先是用jquery中的width()和height()方法（这两个方法获取的只包含内容区域的宽高,这个获取的数据类型是number），（ps:除此以外，outerWidth() ，outerHeight()这两个方法是获取盒子模型中的包含内边距和边框的宽度和高度）

还有一种方法获取非行间样式，使用css（）方法，这个方法获取的数据类型是string

恩恩，差不多就是这么多。over！

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

JavaScript兼容性总结之获取非行间样式案例

非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getElementById('div1'); oDiv.currentStyle.width; Chrome/FF获取非行间样式 var oDiv = document.getElementById('div1'); oDiv.getComputedStyle(oDiv,false).width; 我的兼容性
js和jquery中获取非行间样式

样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相同,唯一性) 那么来说说在js和jquery中,有时候需要获取元素的样式,比如说width或者height,在这种情况下如何获取? js中 1.行间样式: 相信大家无论是看书还是咋滴,都知道怎么获取行间样式吧,就是利用一个style: 这种利用style的方式获取的只能是行间样式. 2.非行间样式
js与jquery中获取当前鼠标的x、y坐标位置的代码

复制代码代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l
JS非行间样式获取函数的实例代码

行间样式:元素内部用style定义的样式,如:<div style="width:200px;"></div> 非行间样式:在<style></style>内通过css定义的样式先看一段出问题的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </
js与jQuery实现获取table中的数据并拼成json字符串操作示例

本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作.分享给大家供大家参考,具体如下: 核心代码如下: JavaScript代码: function tabToJSON(id) { var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组 var titles = trs[0].getElementsByTagName("td"); //获得表头t
原生js和jquery中有关透明度设置的相关问题

在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度为了兼容IE与其他浏览器对透明度的设置,
JS、jQuery中select的用法详解

1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&
关于JS与jQuery中的文档加载问题

jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function), 而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(documen
基于JS实现textarea中获取动态剩余字数的方法

案例介绍:我们常见到有的网站有textarea文本框,当你输入的时候,下面有文字提示还能输入多少个字,今天就是要实现这个功能.当然,由于一个页面有好几个textarea,所以使用单个js逻辑进行控制是不行的,得小小的进行封装一下.当然我的封装还有缺漏,但是基本功能是实现了. 首先介绍下单个textarea实现案例 html部分: <textarea id="text_txt1"></textarea> <span id ="num_txt1&qu
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"

js和jquery中获取非行间样式

相关推荐

随机推荐