---
category: utilities/DOM
---

Get the associated CSS properties and values for a
specified element

@param {ReactComponent|DomNode} el - component or DOM node
@returns {Object} object containing css properties and values for the element
968917
function getComputedStyle (el) {
  let style = {}

  if (canUseDOM) {
    const node = el && findDOMNode(el)
    style = node ? ownerWindow(el).getComputedStyle(node) : {}
  }

  return style
}
35018
function DOMChildrenWalker(el) {
    this.raw = [];
    this.index = 0;
    this.target = el;

    var child = el.firstChild;
    var next;
    while (child) {
        next = child.nextSibling;

        switch (child.nodeType) {
            case 3:
                if (/^\s*$/.test(child.data || child.textContent)) {
                    removeEl(child);
                }
                else {
                    this.raw.push(child);
                }
                break;

            case 1:
            case 8:
                this.raw.push(child);
        }

        child = next;
    }

    this.current = this.raw[this.index];
    this.next = this.raw[this.index + 1];
}
13643
function (elId) {
            var carousel = this,
                cssClass = carousel.CLASSES,
                el       = Dom.get(elId);

            if (!el) {
                el = createElement("DIV", {
                        className : cssClass.CAROUSEL,
                        id        : elId
                });
            }

            if (!carousel._carouselEl) {
                carousel._carouselEl=createElement(carousel.get("carouselEl"),
                        { className: cssClass.CAROUSEL_EL });
            }

            return el;
        }
607092
function getCompsByElement(element) {
    var elements = element ? element : this.elements;
    var returnComps = [];
    if (typeof elements == 'string') {
        elements = document.querySelectorAll(elements);
    }
    if (!isArray(elements) && !(elements instanceof NodeList)) elements = [elements];
    each(elements, function (i, element) {
        if (element) {
            element.querySelectorAll('[u-meta]').forEach(function (ele) {
                if (ele['u-meta']) {
                    var comp = ele['u-meta'];
                    if (comp) returnComps.push(comp);
                }
            });
        }
    });
    return returnComps;
}
464790
function css(key, val) {
  var style, props;
  if(!this.length) {
    return this;
  }

  if(key && typeof key === 'object') {
    props = key;
  }else if(key && val) {
    props = {};
    props[key] = val;
  }

  // get style object
  if(key === undefined) {
    style = window.getComputedStyle(this.dom[0], null);
    // TODO: convert to plain object map?
    // for the moment return CSSStyleDeclaration
    return style;
  // get single style property value
  }else if(typeof key === 'string' && !val) {
    style = window.getComputedStyle(this.dom[0], null);
    return style.getPropertyValue(key);
  }

  // set inline styles
  this.each(function(el) {
    el.style = el.style;
    for(var z in props) {
      el.style[z] = '' + props[z];
    }
  });
  return this;
}
1341421
function(el){
		if(el instanceof FancytreeNode){
			return el; // el already was a FancytreeNode
		}else if(el.selector !== undefined){
			el = el[0]; // el was a jQuery object: use the DOM element
		}else if(el.originalEvent !== undefined){
			el = el.target; // el was an Event
		}
		while( el ) {
			if(el.ftnode) {
				return el.ftnode;
			}
			el = el.parentNode;
		}
		return null;
	}
568245
function(el) {

        var p=el, m, re=/ygtv([^\d]*)(.*)/;

        do {

            if (p && p.id) {
                m = p.id.match(re);
                if (m && m[2]) {
                    return this.getNodeByIndex(m[2]);
                }
            }

            p = p.parentNode;

            if (!p || !p.tagName) {
                break;
            }

        } 
        while (p.id !== this.id && p.tagName.toLowerCase() !== "body");

        return null;
    }
376906
function ( property, value ) {
            var el = this.element();
            //setter
            if ( value || value == 0 ) {
                el.setProperty( property, String(value), null );
                //getter
            } else {
                return el.getPropertyValue( property );
            }
        }
250342
function(el) {
      (el.length > 0) && (el = el[0]);
      var orgAttributes = {};
      for (var i=0; i<el.attributes.length; i++) {
        var attr = el.attributes[i];
        orgAttributes[attr.name] = attr.value;
      }
      return orgAttributes;
    }
346124
function diffElements(vNode, elem) {
  var output = '';
  // Diff tagnames and save for closing
  var tagDiff = textDiff(vNode.tagName.toLowerCase(), elem.tagName.toLowerCase());
  tagDiff = '<span class="TemplateString_tag">' + tagDiff + '</span>';
  output += chars.open;
  output += tagDiff;

  // Check declared property values vs DOM values
  // This bypasses properties that are not managed by VirtualNode
  _.each(vNode.properties, function(value, key) {
    if (key === 'attributes' || key === 'namespace') {
      return;
    }
    if (key.toLowerCase() === 'contenteditable' && value.toLowerCase() === 'inherit') {
      return;
    }
    var propValue = value;
    if (isHook(propValue)) {
      if (propValue.value) {
        propValue = propValue.value;
      } else {
        // If this is a hook with no value, ignore as it's functional
        return;
      }
    }
    var propName = utils.propertiesToTransform[key] ? utils.propertiesToTransform[key] : key;

    var domValue = elem[key];
    if (_.isObject(domValue)) {
      domValue = elem.getAttribute(key);
    }
    if (propName === 'href' || propName === 'src') {
      // the href property displays the fully resolved URL when read, so fall back to attribute value
      domValue = elem.getAttribute(propName);
    } else if (propName === 'style') {
      // Style attributes are tricky because they can validly contain whitespace and be out of order
      propValue = _.filter(propValue.cssText.split(';'), _.identity).sort().join(';').replace(/\s/g, '');
      if (typeof domValue === 'string') {
        domValue = _.filter(domValue.split(';'), _.identity).sort().join(';').replace(/\s/g, '');
      }
    }

    var vAttr = ' <span class="TemplateString_attrName">' +
          propName + '</span>=<span class="TemplateString_attrValue">' +
          chars.quote + propValue + chars.quote + '</span>';
    var dAttr = ' <span class="TemplateString_attrName">' +
          propName + '</span>=<span class="TemplateString_attrValue">' +
          chars.quote + textDiff(String(propValue), String(domValue)) + chars.quote + '</span>';
    // If the property is a boolean, any non-"false" value of the template is fine
    output += elem[key] === true && propValue.toString() !== 'false' ? vAttr : dAttr;
  });

  // Check declared attribute values vs DOM values
  // This bypasses attributes that are not managed by VirtualNode
  _.each(vNode.properties.attributes, function(value, key) {
    if (key.toLowerCase() === 'contenteditable' && value.toLowerCase() === 'inherit') {
      return;
    }
    if (key === 'namespace') {
      return;
    }
    var propValue = value;
    if (isHook(propValue)) {
      if (propValue.value) {
        propValue = propValue.value;
      } else {
        // If this is a hook with no value, ignore as it's functional
        return;
      }
    }
    var vAttr = ' <span class="TemplateString_attrName">' + key + '</span>=<span class="TemplateString_attrValue">' + chars.quote + propValue + chars.quote + '</span>';
    var eAttr = ' <span class="TemplateString_attrName">' + key + '</span>=<span class="TemplateString_attrValue">' + chars.quote + elem.getAttribute(key) + chars.quote + '</span>';
    output += textDiff(vAttr, eAttr);
  });
  output += chars.close;

  // Iterate over the larger number of children
  var numChildren = Math.max(vNode.children.length, elem.childNodes.length);

  if (vNode.tagName.toLowerCase() !== 'noscript') {
    for (var i = 0; i < numChildren; i++) {
      output += recursiveDiff(vNode.children[i], elem.childNodes[i]);
    }
  }

  // For diffing purposes all tags are <tag></tag>, even self-closing tags
  output += chars.open + '/' + tagDiff + chars.close;
  return output;
}
105963
function getStyle(el,styleProp) {
  if (el.currentStyle)
    var y = el.currentStyle[styleProp];
  else if (window.getComputedStyle)
    var y = (window.getComputedStyle||document.defaultView.getComputedStyle)(el,null).getPropertyValue(styleProp);
  return y;
}
513276
function getTag(el) {
    return (el.firstChild === null) ? {'UL':'LI','DL':'DT','TR':'TD'}[el.tagName] || el.tagName : el.firstChild.tagName;
}
544436
function (el, name) {
            if (isContextXML) {
                return Dom._getSimpleAttr(el, name);
            } else {
                return Dom.attr(el, name);
            }
        }
1008898
function(el) {
    var path = [];
    var current = el;

    while(current) {

      // if available extract a path fragment
      if (current.getAttribute) {
        // Stop when we find an element which has been made read-only
        if (current.getAttribute("contenteditable") === "false") {
          return null;
        }

        // if there is a path attibute we collect it
        var p = current.getAttribute("data-path");
        if (p) path.unshift(p);
      }

      // node-views
      if ($(current).is(".content-node")) {
        var id = current.getAttribute("id");
        if (!id) {
          throw new Error("Every element with class 'content-node' must have an 'id' attribute.");
        }
        path.unshift(id);

        // STOP here
        return path;
      }

      current = current.parentElement;
    }

    return null;
  }
1081182
function ($el) {
      // Detect if completely empty.
      if (!$el || $el.length === 0) {
        return "<EMPTY OBJECT>";
      }

      var name = "";
      var id = $el.attr("id");
      var cls = $el.attr("class") || "";

      // Try CSS selector id.
      if (id) {
        name += "#" + id;
      }
      if (cls) {
        name += "." + cls.split(" ").join(".");
      }
      if (name) {
        return "'" + name + "'";
      }

      // Give up.
      return $el;
    }
86352
function(el, s) { //el is the element and s the selector of the closest item to find
      // source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
      var f = s.charAt(0);
      for (; el && el !== document; el = el.parentNode) { // Get closest match
        if (f === '.') { // If selector is a class
          if (document.querySelector(s) !== undefined) {
            return el;
          }
        }
        if (f === '#') { // If selector is an ID
          if (el.id === s.substr(1)) {
            return el;
          }
        }
      }
      return false;
      }
553225
function(el) {
      if (!el) {
    		return this[0] ? this.first().prevAll().length : -1;
    	}
    	if (''+el === el) {
    		return u.toArray(u(el)).indexOf(this[0]);
    	}
      el = el.ujs ? el[0] : el;
    	return u.toArray(this).indexOf(el);
    }