Autor Zpráva
Mar
Profil
#1 · Zasláno: 1. 8. 2010, 17:58:16 · Upravil/a: Moderátor (editace znemožněna)
Odpovědět Citovat
potreboval bych nejaky cyklus, ve kterem budu odchytavat vsechny elementy, ktere maji tridu treba abc (class="abc"), zmenit sirku to uz neni problem, problem je s tim cyklem, ktery my ty elementy vytahne nebo znate lepsi zpusob??diky za odpovedi…..

Moderátor Str4wberry: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
Str4wberry
Profil
#2 · Zasláno: 1. 8. 2010, 18:02:07
Odpovědět Citovat
Budeš musit projít všechny elementy a porovnat jejich className.
Witiko
Profil
#3 · Zasláno: 1. 8. 2010, 20:58:49 · Upravil/a: Witiko
Odpovědět Citovat
Tady je řešení cyklem s definicí dvou esenciálních funkcí od Suta:

Použití:
var pole = getElementsByClassName("abc",document);
for(var a = 0; a < pole.length; a++) {
pole[a].style.border = "1px solid #000000";
} 
function getElementsByClassName(className,parentElement) {
    var elements = [];
    var parentElement = parentElement || document.getElementsByTagName("html")[0];
    var nodes = parentElement.getElementsByTagName('*');

    for (var i = 0, child; child = nodes[i]; i++) {
      if (child.className && hasClassName(child,className)) {
        elements.push(child);
      }
    }
  return elements;
}

function hasClassName(element,className) {
    return element.className.match(new RegExp("(^|\\s)" + className + "(\\s|$)"));
}

var pole = getElementsByClassName("abc",document);
for(var a = 0; a < pole.length; a++) {
  pole[a].style.border = "1px solid #000000";
}


Buď a nebo můžeš přepisem CSS Rule měnit přímo definici třídy, což je při větším počtu elementů mnohem ekonomičtější leč prohlížeče se k přepisu stylopisu staví různě a občas odmítají stránku při takovéto změně stylu přerenderovat a změnu vykreslit. Před časem jsem si na to psal funkci:

Použití: changeCSSRule(".abc","border","1px solid #000000") 
/*

    CSS Rules Controller
    Copyright (C) 2010  Vít Novotný / Witiko

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
    
*/ 

var addCSSRule = (
  function() {
    var rules = {};
    return [function(name, property, value) {
      if (!document.styleSheets) return false;
      name = name.toUpperCase();
      if(rules[name]) {
        rules[name]["style"][property] = value;
        return true;
      }
      else {
        for(var sheet = document.styleSheets.length; sheet >=0; sheet--) {
        	var theRules = new Array();
        	if(typeof document.styleSheets[sheet] == "object") {
          	if(document.styleSheets[sheet].cssRules)
          		theRules = document.styleSheets[sheet].cssRules
          	else if (document.styleSheets[sheet].rules)
          		theRules = document.styleSheets[sheet].rules
          	else return false;
          	for(var index = 0; index < theRules.length; index++) {
              if((theRules[index].cssText && theRules[index].cssText.toUpperCase().substr(0,(function(){
                return theRules[index].cssText.indexOf("{");
              })()).indexOf(name) >= 0)
              || (theRules[index].selectorText && theRules[index].selectorText.toUpperCase().indexOf(name) >= 0)) {
                theRules[index].style[property] = value;
                rules[name] = {
                  "style" : theRules[index].style,
                  "index" : index,
                  "sheet" : 0
                };
                return true;
              }
            }
          }
        }
        return false;
      }
    },function(name,property) {
      if (!document.styleSheets) return false;
      name = name.toUpperCase();
      if(rules[name]) {
        if(document.styleSheets[sheet].deleteRule) {
          document.styleSheets[rules[name]["sheet"]].deleteRule(rules[name]["index"]);
          return true;
        } else return false;
      }
      else {
        for(var sheet = document.styleSheets.length; sheet >=0; sheet--) {
          var theRules = new Array();
          if(typeof document.styleSheets[sheet] == "object") {
          	if (document.styleSheets[sheet].cssRules)
          		theRules = document.styleSheets[sheet].cssRules
          	else if (document.styleSheets[sheet].rules)
          		theRules = document.styleSheets[sheet].rules
          	else return false;
          	for(var index = 0; index < theRules.length; index++) {
              if((theRules[index].cssText && theRules[index].cssText.toUpperCase().substr(0,(function(){
                return theRules[index].cssText.indexOf("{");
              })()).indexOf(name) >= 0)
              || (theRules[index].selectorText && theRules[index].selectorText.toUpperCase().indexOf(name) >= 0)) {
                rules[name] = {
                  "style" : theRules[index].style,
                  "index" : index,
                  "sheet" : sheet
                };
                if(document.styleSheets[sheet].deleteRule) {
                  document.styleSheets[sheet].deleteRule(index);
                  return true;
                } else return false;
              }
            }
          }
        }
        return false;
      }
  },function(name,property) {
      if (!document.styleSheets) return false;
      name = name.toUpperCase();
      if(rules[name]) {
        if(document.styleSheets[sheet].deleteRule) {
          document.styleSheets[rules[name]["sheet"]].addRule(name,property);
          return true;
        } else return false;
      }
      else {
        for(var sheet = document.styleSheets.length; sheet >=0; sheet--) {
          var theRules = new Array();
          if(typeof document.styleSheets[sheet] == "object") {
          	if (document.styleSheets[sheet].cssRules)
          		theRules = document.styleSheets[sheet].cssRules
          	else if (document.styleSheets[sheet].rules)
          		theRules = document.styleSheets[sheet].rules
          	else return false;
          	for(var index = 0; index < theRules.length; index++) {
              if((theRules[index].cssText && theRules[index].cssText.toUpperCase().substr(0,(function(){
                return theRules[index].cssText.indexOf("{");
              })()).indexOf(name) >= 0)
              || (theRules[index].selectorText && theRules[index].selectorText.toUpperCase().indexOf(name) >= 0)) {
                rules[name] = {
                  "style" : theRules[index].style,
                  "index" : index,
                  "sheet" : sheet
                };
                if(document.styleSheets[sheet].addRule) {
                  document.styleSheets[sheet].addRule(name,property);
                  return true;
                } else return false;
              }
            }
          }
        }
        return false;
      }
    }]
  }
)();
var changeCSSRule = addCSSRule[0];
var removeCSSRule = addCSSRule[1];
addCSSRule = addCSSRule[2];


Spíš ale doporučuju dát prvkům, je-li to možné, jiný shodný znak - nejlépe atribut name a poté je sebrat pomocí document.getElementsByName, jde o nejčistší řešení.
panther
Profil
#4 · Zasláno: 1. 8. 2010, 21:01:32
Odpovědět Citovat
Witiko:
„a nebo můžeš přepisem CSS Rule měnit přímo definici třídy“
předpokládám, že se bude třída měnit za určitých okolností, ne vždy a všude. Toto řešení bych dle dotazu vyloučil, to asi možné nebude.
Witiko
Profil
#5 · Zasláno: 1. 8. 2010, 21:18:03 · Upravil/a: Witiko
Odpovědět Citovat
Možné to je, dělal jsem se s tím na poměry psaní jedné funkce docela dlouho (~1 hodina strávená v dokumentaci a vztekáním se s MSIE), ale potvrzuji funkčnost changeCSSRule ve Webkitu, MSIE 6+, Mozzile i Opeře 10 (addCSSRule a removeCSSRule aktuálně nelze dle všeho do MSIE implementovat, v IE9 testováno a funkční). Jen se může stát, že prohlížeč nepřerenderuje stránku. Dávám to sem jako možnost, nedoporučuji ani jedno z řešení viz. můj poslední řádek, jde jen o zajímavý koncept.
Kcko
Profil
#6 · Zasláno: 2. 8. 2010, 01:14:09 · Upravil/a: Kcko
Odpovědět Citovat
jQuery 
$(".abc").each(function(){
// tady si ten element odchytis ... this
});
Mar
Profil
#7 · Zasláno: 2. 8. 2010, 08:50:33
Odpovědět Citovat
diky za vsechny odpovedi, obzvlast Witiko
Časová prodleva: 14 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0