****, the manual is so confusing:
Syntax
arr.forEach(callback[, thisArg])
WTF, WTF…
You use it like an array but they have callback in syntax.
What I was using with Array.forEach is an <a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Array_generic_methods">Array generic method, since document.styleSheets is not an Array and has no own .forEach method.
It is the same as using Array.prototype.forEach.call(...) which will work in all browsers, but is longer to write.
It is depricated.
Is it this?
(function (global, infinity, undefined) {
/*jshint bitwise:false, maxlen:95, plusplus:false, validthis:true*/
"use strict";
/**
* Local references to constructors at global scope.
* This may speed up access and slightly reduce file size of minified version.
*/
var Array = global.Array;
var Object = global.Object;
var Math = global.Math;
var Number = global.Number;
function forEach(callback, scope) {
/*jshint newcap:false*/
var elements, length, index;
// convert elements to object
elements = Object(this);
// make sure callback is a function
requireFunction(callback);
// convert length to unsigned 32 bit integer
length = elements.length >>> 0;
// iterate over elements
for (index = 0; index < length; ++index) {
// current index exists
if (index in elements) {
// execute callback
callback.call(scope, elements[index], index, elements);
}
}
}
}
But if this is non-cross browser solution than it has no sense to integrate it in my addon.
Yeah, just read that too. Shame though, I really liked them (but the Chrome people didn’t, thus the deprecation).
But you don’t need to use a polyfill, that’s somewhat overkill. I will update the code above to work in Chrome. (done)
The function code is too hard for me to understand. I don’t know which parts are non-cross browser. Maybe the global.Array . If it would be possible to write such forEach function but cross-browser, then I would integrate it.
As I said, I’ve updated the code above
Can you yet explain this?
hasClass.test(rule.selectorText)
I see RegExp.prototype.test() but it is still not clear to me from where you got the selectorText value.
first call
Array.prototype.forEach.call(document.styleSheets
you go through styleSheets.
What is this:
({ rules, })
unknown syntax for me. Callback with one argument? Why the dash is there? No, I guess some type of assignment…
So what is the final result - one dimentional array?
Quite strange code. Is the updated version still non-cross browser?
Why the dash is there?
Which dash? After String.raw inside the template string? (Note: you lost two characters in your quote) That one is escaping the ‘.’ for the RegExp
So what is the final result - one dimentional array?
Yes
Quite strange code. Is the updated version still non-cross browser?
The code worked in Firefox before the “update”, so yes, the whole point of changing it was to make it cross-browser compatible.
I speak about this dash “,”:
({ rules, })
I see only one parameter inside the {} and so I am confused why the dash is not followed by some variable or property…
That’s a comma :D. This is a dash: “-”
Tailing commas in (modern) JavaScript are optional. So you don’t have to set them but you can
Why the rules array is declared as const? I think you save object to it so it should be variable.
(I’m not entirely sure what you mean, but:)
The const doesn’t effect the referenced value, but the reference to it:
declaring an identifier const means you can’t assign to it (const a = { }; a = [ ]; doesn’t work),
but you can still manipulate the values properties (const a = { }; a.b = 42; works).
I tried your code but the rules array is empty when function finishes. Maybe I could send you my addon so you could check how it works?
I would explain you what I am working on and maybe you can improve the code. If it would work it would be great because the code is quite sort. I tried to create complicated solution but I failed here and here.
I wonder that such function like yours is not standard part of browsers. We use functions to remove css classes but we cannot analyse it’s content… Which is neccessary if you need to remove a class dynamically/automatically.
What exactly is it you want to achieve?
Do you want to forcefully apply (user) styles to elements with a certain class?
If so, do you really need anything more than rules that are declared as !important?
I am working on addon which can swap columns (divs). This is archieved by 1) analysing divs positions and 2) analysing styles. Before I can apply new (absolute) position of the divs, I must to remove the classes which give the position:absolute, left: …, right: …, top: … or bottom: … positions and float: being set to “non-none”. So I need to analyse the classes or even div’s id.
The code looks like this:
var selectors = "div.fauxcolumn-right-outer;div.fauxcolumn-center-outer"
var selectors = selectors.split(";");
var searches = [];
var targets = [];
for ( var k in selectors )
{
if ( (k % 2) == 0 )
searches.push(selectors[k]);
else
targets.push(selectors[k]);
}
for ( var k in searches )
{
var search, target;
search = $(searches[k]);
if ( search.length )
target = $(targets[k]);
if ( !search.length || !target.length )
continue;
var s_css_arr = search.prop("className").split(" ");
var t_css_arr = target.prop("className").split(" ");
var className = s_css_arr[0];
const hasClass = new RegExp(String.raw`\.${ className }(?:[^\w-]|$)`);
const rules = [ ];
Array.prototype.forEach.call(document.styleSheets,
({ rules, }) => rules && Array.prototype.forEach.call(rules,
rule => hasClass.test(rule.selectorText) && rules.push(rule)
)
);I see the problem. There is div.classname so I will need to modify it
Doing that may have unexpected consequences. Instead you should div.style.setProperty('left', '42px', 'important')
This will overrule all other styles defined in stylesheets
I guess you misunderstand me. div.classname is the JQuery selector.
Maybe I did …
I started to debug your code and now I see that it does not enter the second function.
In my case there are 1st stylesheets which have no the cssRules, but the 3rd one does. But the rules varibale is undefined. This is similar problem which I had in my code previously. I was stucked with SOP, there was exception Security error. In your case there is not security exception but it seems like the browser refuses to access the object this way. Why it is undefined? It should not be. I can view the object in debugger but I cannot access it. It would be simpler if you would download my addon version for Firefox and try it on the same blog as I am doing the test.
