Can I edit a HTML-tag's CSS using DART?
I have done some searching but I couldn't really find out how to do it, or if it even is possible.
The reason to do this because I would like to change a button's location on a page.
You can change or view css properties through Element.style. The Element.style is an instance of CssStyleDeclaration. You can do the following:
Element element = document.querySelector("div")
..style // edit any of the properties of this variable
..style.background = "orange";
I guess you are looking for something like
var el = document.querySelector('.somediv');
// or '#someid' or other CSS selector to get hold of an element
el.style.color = 'blue';
You may want to look at the dart class CssStyleSheet which can grab a sheet and delete, insert and add rules. You need to know the index of the rule in the style sheet.
Related
I am trying to disable a button dynamically based on a data attribute that's present on the body, code looks sort of like this:
<body data-online="true">
<button disabled></button>
</body>
What I want is to set the pseudoclass disabled based on the value of the body's data attribute. I'm looking for the simplest possible way to do this. I know that conventionally this would be done asynchronously with JS, but for annoying reasons I have no direct control over I would prefer another way. I'm wondering if it's possible to set the pseudoclass directly through CSS or HTML in some way?
I honestly don't this it is possible to achieve this without any JavaScript since the disabled properly is a boolean attribute.
You'll need at least to grab the element using JavaScript and conditionally apply the disabled attribute. As on the code below:
function checkButtonDisabled() {
const body = document.querySelector('body');
const button = document.querySelector('#btn')
const buttonIsDisabled = body.getAttribute('data-online') === 'true'
if (buttonIsDisabled) {
button.setAttribute("disabled", true)
return
}
button.removeAttribute("disabled")
}
checkButtonDisabled()
Although, If your intention is also to style it, you could use the selector below or some variant that could suit better for you:
body[data-online="true"] > button {
/* Your styles here */
}
you could check this article also which explains attribute selectors.
How to remove anchor tag '' in java script?
When I inspected the page, below is the screenshot of what I got
Here is my code:
<div class="dropdownm1-content">
<b>SHOP ALL</b>
<b>SHOP BY CATEGORY</b>
<p class="mn_category">
Just get the Element by using the ID of it and then remove it with the remove() function. Like so:
var removeanchor = getElementById('YOURANCHORTAGID');
removeanchor.remove();
or without creating a variable:
getElementById('YOURANCHORTAGID').remove();
(replace YOURANCHORTAGID with the id of your anchortag). If you want to trigger this after an action just create a function and trigger it with the action you want :).
for further information check the mdn docs:
https://developer.mozilla.org/de/docs/Web/API/ChildNode/remove
You may should add some more information to your question for a more precise answer. However, for the time being this may helps you out.
If you try to use it, pay attention to the fact, that I only adressed the first Element with the class 'text_main' and only the first of its children with 'a' Tag. You may need to change this, according to your code.
// Removing a specified element without having to specify its parent node
container = document.getElementByClass("text_main")[0];
var node = document.getElementsByTagName("a")[0];
if (node.parentNode) {
node.parentNode.removeChild(node);
}
Further information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
For that specific link you showed:
document.querySelector('.dropdownm1-content .text-main a:first-child').remove()
Though I'd highly recommend curing the sickness, not the symptom.
So, I'm trying to access the input field hidden deep within a paper input field. This is so that I can change the input type and so on. After inspecting the element, You can see that it has 2 shadow roots as explained in this blog. However, the method explained in that blog no longer works. I'm using dart version 1.5.3, polymer 0.12.0-dev.
I try to query the paper input like so:
querySelector('#paper-input-id').shadowRoot.querySelector('#input');
However, that returns null. This is because the shadowRoot property only returns the first shadow root. The input field is buried in the second shadow root. I guess what I am asking is if there is a generic way to select the nth-shadow root of an element?
This seems exactly how I did it in the unit test for <core-input>
var input = dom.document.querySelector("#changeAndInputEvent") as CoreInput;
var domInput = (input.shadowRoot.olderShadowRoot.querySelector('#input') as dom.InputElement);
what also should work is
var domInput = (dom.document.querySelector("#changeAndInputEvent /deep/ #input");
or
var domInput = (dom.document.querySelector("* /deep/ #changeAndInputEvent /deep/ #input");
when the paper-input itself is inside a shadow-dom
Instead of using shadowRoot and olderShadowRoot, which may change if for whatever reason paper-input decides to inherit something new that then inherits from core-input, try using the more generic shadowRoots map (note the 's'):
querySelector('#paper-input-id').shadowRoots['core-input'].querySelector('#input');
I want users to know what page they are currently on by highlighting the hyperlink.
I'm not using a list of buttons if that matters (<li>), I'm just using links.
I don't want to have to give each link a class on each page to tell if it's active or not.
Is there anyway of doing this without giving each active link a class?
I've looked into this issue and from what I see jQuery can be a possibility but I'd prefer to use it as I'm not clued up on jQuery. If anyone does know of any jQuery solutions I'll be happy to look at them!
Any automatic active link detectors about? :)
I think this may work but I haven't tested it.
It's using jQuery and it's pretty readable.
You should however process the path name to have just the part needed for the match in the hrefHasPath function.
var links = $("#links a"); // gets all links within something with an id of "links"
var pathname = window.location.pathname; // current url
//for each link see if the href has something in the path, and if it does add a css class
$.each(links, function(){
if(hrefHasPath($(this).attr("href"))){
$(this).addClass("highlight");
}
});
function hrefHasPath(href){
return (href.indexOf("pathname ") != -1);
}
Off the top of my head, I would approach this by grabbing all <a> elements (or ones in a certain grouping, or in a class, like navigation) and checking if the CURRENT URL == a.href
Something like so:
var a = document.getElementsByTagName('a');
for (var idx= 0; idx < a.length; ++idx){
if(a[idx].href == document.URL){
// some styles here to the link background
a[idx].style.backgroundColor = 'red';
}
}
If you add in jQuery it will make your selector easier for styling and the like.
The place were I wnat to use the YUI DataTable is in a wiki that allows HTML and javascript. I have created the custom table, put it in a div and gave it an ID and it works really well except that it usees the CSS from the container wiki page and visually it is not presentable. I would like to be able to set the CSS information for this particular table so that it is more readable. As you might guess I cannot modify the "head" information as the wiki only allows me to add things to the "body" of the html. I am by no means an expert in html and as such I am not sure if can specify CSS for a one table?
I was looking around in the YUI documentation to see if there was a mechansim in the YUI DataTable to set the CSS type of information but I could not really find anything. It seems like I should be able to set it in the oConfig object I pass to the table when it is created. So if someone knows of a way to do it using the YUI DataTable parameters that would be appreciated as well.
Can you run Javascript in the page? If so, then you can dynamically add a css link to the page without access to the element.
Here's how from the open source Timeline project:
// Use document for the doc param
function includeCssFile(doc, url) {
if (doc.body == null) {
try {
doc.write("<link rel='stylesheet' href='" + url + "' type='text/css'/>");
return;
} catch (e) {
// fall through
}
}
var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
getHead(doc).appendChild(link);
};
function getHead(doc) {
return doc.getElementsByTagName("head")[0];
};
Put your datatable in a specific div with an id
Or: Via the css selector : #yourdivid .yui-dt-data