Quick question regarding Javascript. I'm working on a Safari Extension for paring down the Google Search page, and I'd like to change the Google logo to a custom image. My plan is to have an injected .js script to put in the extension.
So far, I've tried this:
document.getElementById('img#hplogo').innerHTML =
"<img alt="Google" height="95" id="hplogo" src="logo3w.png" width="275"
style="padding-top:136px" onload="window.lol&&lol()">"
For some clarification, the logo image is under the ID on the Google homepage as "hplogo" or according to Safari Web Inspector, "img#hplogo". I want to replace the src, obviously, with my own logo3w.png that will be located in the root of the extension folder (thus, AFAIK, no advanced directory is needed).
If I could be pointed in the right direction command-wise, that'd be really helpful, but really any and all help is appreciated. Thanks!
You want to do:
document.getElementById("hplogo").src = "logo3w.png";
Note that the "img#hplogo" is not saying that the id of the img element is "img#hplogo", it is saying that you are looking at an "img" element whose id is "hplogo". So when using document.getElementById() you only need to pass "hplogo". In CSS you might say:
img #hplogo {
display: none; //or whatever
}
#hplogo {
display: none; //or whatever
}
And similarly with something like jQuery that supports CSS-style element selectors you might say:
var image = $("#hpLogo");
var theSameImage = $("img #hplogo");
But for document.getElementById() all you need to pass (and all you can pass) is "hplogo".
You may want to change the src attribute of the image:
document.getElementById('img#hplogo').src = 'path/to/your/image.jpg'
Changing the "innerHTML" property changes the inner HTML, not the element itself. The thing you want to do is find the element and change it's "src" property.
Related
I want to take the logo of google.com and rotate it, not big deal and nothing really important, I just wanna learn JS in a fun way.
When I use the select element tool (Ctrl+Shift+c in chrome) I get that logo's id is "logo", so I'm trying this way:
const logo = document.getElementById("logo");
But I get this everytime I try:
undefined
I'd appreciate any help, TY <3
You need to target it's class, id or an attribute. Assuming you're talking about Google's default search homepage, the class seems to be using a dynamic value (you can still target using that value but your code will not work if you try to run it again when the values have changed) so you could target it's alt attribute instead and use the transform rotate() css property on it like this:
const logo = document.querySelector('img[alt="Google"]');
logo.style.transform = "rotate(180deg)";
The above two lines should rotate the Google logo if you run it in the browser console.
I'm assuming you entered that in the JS console.
The result of the const logo = ... statement is undefined, but that doesn't mean the const didn't get assigned (though in case the element doesn't exist, then logo did get assigned undefined...).
If the element does exist and you follow up with logo.style.transform = 'rotate(90deg)', it should work out fine.
As an aside, document.querySelector("img[alt=Google]") may be more bullet-proof for Google's front page.
See:
I need to check if all images on my page have the Alt attribute. I thought doing the following would do that but it doesn't check things correctly and just gives me an everything is good when I know it's not.
cy.get('img').should('have.attr',
'alt' );
Is there an easy solution other than many go through the page and build a selector for every image?
To check each element, you can use .each:
cy.get('img').each($el => {
cy.wrap($el).should('have.attr', 'alt')
}
I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.
It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.
This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");
To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;
I am trying to figure out the method for switching audio tag source. In this example I am getting the source from a list, however I'm not sure how to do it.
Here is the fiddle: jsfiddle.net/4vrR2/9
Any advice on making it work would be appreciated :)
To change the attribute you need to specify setAttribute("src",value) instead of src:
http://jsbin.com/zexoweyu/1/edit
function changeSong() {
var element = document.getElementById("audioPlayer")
element.setAttribute("src","magic");
}
PS: To see the change in the DOM open the browser devtools, since JSBin will not reflect the change in the source code tab.
Is there any way to remove the tooltip from title attribute without actually remove the title.
I have a link with a title attribute like this
It is important that the title is intact since I need to read the url from there. All the fixes for this that I have found is to remove the title attribute and reuse it but in this case this is not possible.
Any ideas?
It's all about the browser. It's the browser that sees the title as a tooltip, from the browser specifications and interpretations.
You should use if you want to handle data like that, the HTML5 way (which you can use in any other document type as it's ignored) and use:
with the data- attributes, there will be no tooltip as title is not used, and you can easily get that using:
$("a").attr("data-title")
but, you will need to convert stuff and you said that you don't/can't do that.
you can easily convert all titles into data-title and clean the title using
$("a").attr("data-title", function() { return $(this).attr("title"); } );
$("a").removeAttr("title");
(all code is to be used with jQuery Framework)
As you didn't mark this question as jquery, I'm assuming that you'd be open to a pure JavaScript solution?
The following works (on Ubuntu 11.04) in Firefox 5, Chromium 12 and Opera 11, I'm unable to test in IE, but as I'm using querySelectorAll() I'd suspect that it wouldn't work well, if at all. However:
var titled = document.querySelectorAll('[title]'); // gets all elements with a 'title' attribute, as long as the browser supports the css attribute-selector
var numTitled = titled.length;
for (i=0; i<numTitled; i++){
titled[i].setAttribute('data-title',titled[i].title); // copies from 'title' to 'data-title' attribute
titled[i].removeAttribute('title'); // removes the 'title' attribute
}
JS Fiddle demo.
References:
document.querySelectorAll at the Mozilla Developer Network.
Why don't you use jQuery to move this information from title to element data.
Run this on element load:
$(el).data('url', $(el).attr('title')).attr('title', '');
And afterwards read URL like this:
$(el).data('url');
Variable el here is DOM element or element selector.