美文网首页
getStyle()样式,setStyle样式

getStyle()样式,setStyle样式

作者: zhao_ran | 来源:发表于2021-05-02 21:35 被阅读0次
function getStyle(obj, name) {//obj:元素对象,name:样式属性名
      if (window.getComputedStyle) {
        return getComputedStyle(obj, null)[name];
      } else {
        return obj.currentStyle[name];
      }
    }
另一种写法
 const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
    const MOZ_HACK_REGEXP = /^moz([A-Z])/;


    function getStyle(element, styleName) {
      if (!element || !styleName) return null;
      styleName = camelCase(styleName);
      if (styleName === 'float') {
        styleName = 'cssFloat';
      }
      try {
        var computed = document.defaultView.getComputedStyle(element, '');
        return element.style[styleName] || computed ? computed[styleName] : null;
      } catch (e) {
        return element.style[styleName];
      }
    };

    const camelCase = function (name) {
      return name.replace(SPECIAL_CHARS_REGEXP, function (_, separator, letter, offset) {
        return offset ? letter.toUpperCase() : letter;
      }).replace(MOZ_HACK_REGEXP, 'Moz$1');
    };
获取文本的宽度
//node:元素对象
const range = document.createRange();
    range.setStart(node, 0);
    range.setEnd(node, node.childNodes.length);
    const rangeWidth = range.getBoundingClientRect().width; // 文本区域宽度
export function setStyle(element, styleName, value) {
  if (!element || !styleName) return;

  if (typeof styleName === 'object') {
    for (var prop in styleName) {
      if (styleName.hasOwnProperty(prop)) {
        setStyle(element, prop, styleName[prop]);
      }
    }
  } else {
    styleName = camelCase(styleName);
    if (styleName === 'opacity' && ieVersion < 9) {
      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
    } else {
      element.style[styleName] = value;
    }
  }
};

相关文章

  • getStyle()样式,setStyle样式

    另一种写法 获取文本的宽度

  • JS基础(9)

    设置样式: 设置多个样式setStyle(obj,json); 只设置一个样式setStyle(obj,name,...

  • JS基础

    1.获取非行间样式 //获取非行间css样式 function getStyle(obj,attr){//获取...

  • 函数封装(原生)

    getStyle 批量获取(设置)样式 getByClass 通过class获取标签的兼容写法 非行间样式...

  • JS 兼容整理

    获取非行内样式的兼容方式 function getStyle(obj,attr){//获取非行间样式,obj是对象...

  • vue样式设置

    vue设置行间样式 vue.setStyle({ el: ,width: ,height: })

  • 获取元素样式

    获取元素当前样式 getStyle(obj, styleName) 写这篇文章的目的是为了拿到当前元素的现有的样式...

  • JS兼容性

    1.获取样式 function getStyle(obj,sName){ return (obj.current...

  • 利用传参取行间样式

    //style 只能取到行间样式 function getStyle(obj,name) { if (obj.cu...

  • 获取页面所有img标签 css批量设置

    找到页面上所有的img标签 批量修改样式 兼容IE 6 7 8 的设置样式 function setStyle(e...

网友评论

      本文标题:getStyle()样式,setStyle样式

      本文链接:https://www.haomeiwen.com/subject/vgcxdltx.html