Главная / Java Script / ООП / Mootools /

hasNodePNG - выборка DOM элементов с фоновым PNG

Воскресенье, 05 Декабрь 2010

Оптимизируя верстку с использованием фоновых изображений PNG формата под IE6, я часто использую скрипт DD_belatedPNG_0.0.8a.js, который позволяет корректно отобразить элементы с фоновыми PNG (данный скрипт использует VML).

Скрипт работает отлично и его просто подключить и использовать для IE6:

 
<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.pngFix');
</script>
<![endif]-->

Подключаем скрипт
Передаем в функцию fix() имя класса элементов имеющих фоновый png

И все бы хорошо, но что если не знаешь, какие элементы могут быть на странице, если она генерируется динамически, из-за этого возможен случай пропуска элементов с фоновым PNG и в итоге некорректное отображение в IE6.

Обдумывая такой случай задался вопросом, а как же получить все DOM элементы имеющие в CSS свойстве background-image PNG? Все оказалось достаточно просто в том случае если используется Javascript Framework Mootools или jQuery. В Mootools это функция getStyle();, а в jQuery css();, которые возвращают значения свойства переданного в качестве параметра:

 
#exemple{background:url('img/bg.png');}

Получаем значение свойства background-image, элемента с ID exemple

 
//mootools
$('exemple').getStyle('background-image'); //return 'background:url('img/bg.png');'
//jQuery
$('#exemple').css('background-image'); //return 'background: url('/img/bg.png');'

Имея в наличии такие полезные функции можно пройтись по всему дереву DOM элементов и отобрать только те, у которых в параметре background-image используется PNG, занести эти элементы в массив, и далее обрабатывать эти элементы.

Данная идея реализовалась в виде такой функции :

 
//mootools
function hasNodePNG(elements){
  var array = [];
  var e = 0;
  elements.each(function(el, i){
    var bg = el.getStyle('background-image').toString();
    if(bg!='none' &amp;&amp; bg.test('.png') + 1){
      array[e]=el;
      e++;
    }
  });
  return array;
}

Которая в качестве входного параметра принимает массив элементов, проходится по ним в цикле, проверяя существует ли у элемента свойство background и есть ли в нем подстрока '.png', и если условие выполняется то данный элемент добавляется в массив. Функция отбирает из переданного ей массива элементов DOM те у которых есть свойство background содержащее ссылку на файл с расширением png.

Это вызов функции:

 
//mootools
var arr = hasNodePNG($$('body *'));

А это обработка возвращенных функцией элементов в массиве:

 
if(arr.length>0){
  for(var i=0;i<arr.length;i++){
    $(arr[i]).addClass('pngFix');
  }
  DD_belatedPNG.fix('.pngFix');
}

Здесь осуществляется проверка на то что массив не пустой, и если условие выполняется, в цикле каждому элементу массива (DOM) присваиваем класс pngFix, после чего вызываем функцию обработки PNG для IE6 DD_belatedPNG.fix(), передавая ей имя присвоенного класса - pngFix.

Не обязательно проверять все элементы документа, вы можете проверить лишь дочерние элементы у определенного родителя, передав функции массив элементов вот так:

 
//mootools
var arr = hasNodePNG($$('#parent *'));

Полный код:

 
//mootools
window.addEvent('domready',function(){
 
  function hasNodePNG(elements){
    var array = [];
    var e = 0;
    elements.each(function(el, i){
      var bg = el.getStyle('background-image').toString();
      if(bg!='none' &amp;&amp; bg.test('.png') + 1){
        array[e]=el;
        e++;
      }
    });
    return array;
  }
 
  var arr = hasNodePNG($$('body *'));
 
  if(arr.length>0){
    for(var i=0;i<arr.length;i++){
      $(arr[i]).addClass('pngFix');
    }
    DD_belatedPNG.fix('.pngFix');
  }
 
});

Это был пример с использованием javascript библиотеки mootools, ниже пример для jQuery:

 
//jQuery
$(document).ready(function(){
 
  function hasNodePNG(elements){
    var array = [];
    var i = 0;
    elements.each(function(n,element){
      var bg = $(element).css('background-image').toString();
      if(bg!='none' &amp;&amp; bg.indexOf('.png') + 1){
        array[i]=$(element);
        i++;
      }
    });
    return array;
  }
 
  var arr = hasNodePNG($('#main *'));
 
  if(arr.length>0){
    for(var i=0;i<arr.length;i++){
      $(arr[i]).addClass('pngFix');
    }
    DD_belatedPNG.fix('.pngFix');
  }
 
});

Download

PS. И не забудьте подписаться на ленту новостей RSS

Метки:

hasNodePNG - выборка DOM элементов с фоновым PNG

Похожие статьи:

Добавить комментарий