Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.
Related
I have a website which contains many divs. Some of them have an attribute data-status.
Example:
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
I want to add an onClick event to them. How can I identify these divs in Jquery?
These divs are not siblings! They are at different knots.
I found this example
$("input[value='Hot Fuzz']")
on api.jquery.com, but with it I can find attributes with a value equal to my search only. But in my case, I want to find an attribute with any values. Is it possible?
Simple as the attribute selector you already used "[]" - just, without the value part:
$("[data-status]").on("click", function() {
console.log(this.textContent)
});
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The same selector can be used in CSS too - if you'll ever need it:
[data-status] {
color: gold;
}
<div data-status="read">+-*</div>
<div data-status="unread">123</div>
<div data-status="sticked">xyz</div>
<! DOCTYPE html>
<html>
<head>Sample</head>
<body>
<div class="panelBody">
<div class=panel-section></div>
<div class=panel-section style="display:block"></div>
</div>
</body>
</html>
In given Snippet there are two elements with same class. I have to select the element which does not having style attribute.If i tried to search with panel-section class its giving ambiguity error.So how to select div element which does not having style attribute.i.e
<div class=panel-section></div>
Try this:
//div[#class='panelBody']/div[not(#style)]
Explanation: First find the div with class panelBody, then find child div elements in the panelBody div which doesn't contain #style attribute.
Use findElements method if there are more than one div element without #style attribute, otherwise findElement() method would suffice.
Since there are more than one elements with same class name, you need to use Selenium's driver.findElements() method. I have tried getting this element, but I wonder if it is clickable. Only element can actually be useful here is text Sample.
Check below code. Let me know if it is similar to what you are looking for.
List<WebElement> linksize=null;
String links[]=null;
linksize = driver.findElements(By.cssSelector("div[class=panel-section]"));
int linksCount = linksize.size();
links= new String[linksCount];
for(int i=0;i<linksCount;i++)
{
links[i] = linksize.get(i).getAttribute("style");
if(links[i].isEmpty())
{
System.out.println("I am div without style");
linksize.get(i).click();
}
}
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I can't figure out how to get Nitrogen to generate an actual id attribute of an html element. For example, In index.erl:
#panel { id = "test" } or #panel { id = test }
the generated html element looks like this:
<div class="wfid_test"></div>.
but what I want is:
<div id="test"></div>
so I can use an anchor link like Scroll Down to Test to reference the id.
This is basic HTML that has been around forever, so I'm sure Nitrogen must have some way of doing it, right?
Use 'html_id' element instead of 'id':
#panel{ html_id=test, body="Test target" }
it will render as:
<div id="test" class="wfid_temp990008">Test target</div>
you can include both 'id' and 'html_id' elements if you need the class for CSS as well:
#panel{ id=test, html_id=test, body="Test target" }
renders as:
<div id="test" class="wfid_temp990008 wfid_test">Test target</div>
#panel { id = test } should work fine. Just use atom instead of sting.
how to change properties of a parent div on hover of child div.
can it be done with pure css ?
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}
Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.):
<div id="parentId" class="parent">
<div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
</div>
</div>
<script type="text/javascript">
function doOnMouseOver() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
parentNode.setAttribute('class', parentClass);
}
function doOnMouseOut() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
parentNode.setAttribute('class', parentClass);
}
</script>
Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.
Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.
jQuery actually makes your job easier but you should try doing this with javascript at least once.
I hope it helps.
Is there a reason you do not want to use JavaScript or JQuery?
You could simply:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
There is no parent selector in CSS.
You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors