edit: I can only access to the html of the div with the id
I want to do something similar to this but i can't access to css file due to my companies setup. I need to do this from HTML without css
<html>
<head>
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
"I need to do this from HTML without css"
I'm assuming for some reason you cannot use style blocks <style></style> in your html, e.g. in some email contexts.
You can overcome this by using inline style style="background-color:yellow;"
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input style="background-color:yellow;">
</div>
</div>
</div>
</body>
</html>
Edit based on Javascript
"thanks but I can only edit the html of the div with the id"
So this is the javascript that you can insert into the html code.
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
<html>
<head>
</head>
<body>
<div id = "fileView_ctl01_D_STRT" class="intro">
<div>
<div>
<input>
</div>
</div>
</div>
</body>
</html>
If you are inserting into the html text directly, you need to put them within the <script></script> block before adding them at the bottom of the html just before </body>:
...
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
</body>
There are a few different ways you can handle this, but it kind of depends on what you mean by saying you can't use CSS. The HTML is pretty much always styled with CSS. But you can add CSS a few different ways.
Inline style: This is what I suspect you might need. Place a style attribute in the div and provide it with the appropriate directions. Example:
<div id = "fileView_ctl01_D_STRT" style="background-color: yellow;">
An internal stylesheet: As you've demonstrated above, you can embed an internal stylesheet.
<style>
#fileView_ctl01_D_STRT input {
background-color: yellow;
}
</style>
Javascript: Finally, you can control styles with Javascript. You have to grab the element you want to style, for example, with the id you've assigned, and apply a style to it. Just as chatnoir has demonstrated:
<script>
let input = document.querySelector("#fileView_ctl01_D_STRT input");
input.style.backgroundColor = "yellow";
</script>
This code can be in a separate, external file that you call to in the HTML via the "src" attribute.
Without CSS, you're pretty much limited to this stuff: https://stackoverflow.com/a/21951731/7055314.
Related
I'm getting HTML template response from API service, in that sometimes I'm getting link and its href value is empty string(but innerText has some value),
Can anyone help me how can I hide the anchor tag if only text is present and href is empty.
Sometimes HTML response provides multiple empty links, give solution to hide all the empty links.
<div class="hyper-btn">
User Profile
</div>
To hide anchor tag, by using CSS will hide the elements from document.
<!DOCTYPE html>
<html>
<style>
.hyper-btn a[href=""] {
display: none !important;
/* will hide all the empty anchor tags */
}
</style>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
</body>
</html>
To remove anchor tags from DOM itself, add below JavaScript
<!DOCTYPE html>
<html>
<body>
<div class="hyper-btn">
Empty Link
Link to some Address
</div>
<script>
const linkList = document.querySelectorAll('.hyper-btn a');
linkList.forEach(element => {
const targetURL = element.getAttribute('href');
if(!targetURL) {
element.remove(); // will be removed from DOM
}
});
</script>
</body>
</html>
I have a page which appears with some pre-filled data in input boxes. I want to select the input box which has my desired content, based on the content itself. This content isn't part of page HTML, but rather appears as value attribute in the element properties.
I have written a simple HTML file (test.html) to demonstrate the problem:
<!DOCTYPE html>
<html>
<head>
<title> Hello </title>
</head>
<body>
<div id="test">
<input type="text"> <br> <br>
<input type="text"> <br> <br>
<input type="text"> <br> <br>
</div>
<script type="text/javascript">
let input_nodes = document.querySelectorAll("input")
for(var i = 0; i < input_nodes.length; i++) {
input_nodes[i].value = 'value_' + i;
}
</script>
</body>
</html>
On this page I want to select the element with entered value as value_1. It doesn't appear in page HTML, but can be seen in element properties.
Using test.html file in my local, I could see 3 input box in UI
As you can see this xpath
//div[#id='test']//input[2]
represent the node that you've been looking to do send_keys
Try this:
String preFilledValue = "value_1";
List<WebElement> elements = driver.findElements(By.xpath("//div[#id='test']/input"));
for (WebElement ele : elements) {
if (preFilledValue.equals(ele.getAttribute("value"))) {
System.out.println("Element found");
}
}
}
It seems common to use the following HTML structure to accommodate
users who have enabled/disable javascript:
<html>
<style>
div.body { display:none; }
.body > ... { ... }
</style>
<script>
document.onload( function() {
javascript(CONTENT => div.body);
});
</script>
<noscript>
<style>
body > :not(noscript) {
display:none;
}
</style>
</noscript>
<body>
<div class="body">
</div>
<noscript class="body">
CONTENT
</noscript>
</body>
</html>
The mechanism uses a <div>; whose display attribute, initially set
to none, is subsequently set to block|grid|etc. and populated with
CONTENT once the page is loaded; alongside a <noscript>; which is
pre-populated with CONTENT.
No one seems to suggest simply popping the CONTENT within
<noscript> into the <body> when javascript is available as follows
:
<html>
<style>
.body { ... }
.body > ... { ... }
</style>
<script>
document.onload( function() {
let noscript = document.querySelector("noscript");
noscript.outerHTML = noscript.innerHTML;
});
</script>
<noscript>
<style>
body > noscript {
display:content;
}
</style>
</noscript>
<body>
<noscript>
CONTENT
</noscript>
</body>
</html>
Here the CONTENT within noscript is displayed by default and if
there is javascript the tag is simply dropped; the specification
states the content of noscript should be parsable and that the parsed
result be readily assignable as noscript.outerHTML.
The first method requires one to repeat ones CONTENT in both the
noscript and wrapped into the javascript that populates the div;
this isn't especially DRY. I can't see that populating a page through
javascript calls is any faster then assigning ELEMENT.outerHTML; if
this is not true let me know. The second method relies upona bit of
CSS trickery. Finally both methods seem subject to flicker.
The only reasons I can think of for not using the latter structure are
:
SEO; I can't see how though e.g. you only have to scan CONTENT once, it sn't repeated, it isn't bundled between javascript, better
aria/a11y support.
Frontend framework e.g. they all rely on the first structure
historic reasons e.g. setting noscript.outerHTML breaks events or something ut they are broken under the spec anyhow, jQuery.unwrap
being a "recent" development, browser woes.
I have a div that should be displayed as such, but when you click on the div, I need it to transform into an input field.
This is what I have before that div is clicked:
<div>This is the content.</div>
I wan this to become the following when it's clicked:
<input>This is the content.</input>
And to change back when the user clicks elsewhere.
Is such a thing possible with Angular? I looked into using ng-change as a HTML tag, however I couldn't seem to get it going.
Any help is appreciated.
Try this
<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div>
<input ng-show='showInput'>This is the content.</input>
and controller has function like
function cntrl($scope){
$scope.showInput = false;
$scope.toggleShowInput = function()
{
$scope.showInput = !$scope.showInput;
}
}
If you use Angular, you should write both element and toggle one for the other when the user click :
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div>
<input ng-show="inputIsOn" type="text">
</body>
</html>
Nope, but the good news is that you don't need that to happen!
In your controller:
$scope.showInput = false;
$scope.myContent = "This is the content";
Back in your HTML file:
<div ng-hide="showInput">{{myContent}}</div>
<input ng-show="showInput" ng-model="myContent" type="text" />
<button ng-click="showInput = true" />
Now when the button is clicked, the input field will display, but the text will not.
I am coding a C# forms application that lets a user add custom html nodes to a html webpage. I have some javascript code that selects a html node to execute specific code for objects such as a jQuery ui slider.
To identify html nodes, I need to store an attribute in the tag that identifies the tag.
I am new to writing html code, and as such, I would like to ask if there is any reason why I should not use data attributes for tags? Are there any limitations are disadvantages that I should be aware of?
Here is some example code that I have currently working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-customwebpagelayout-name='slider-increments'>
<div data-customwebpageobject-name='slider-increments'></div>
</div>
<p data-customwebpageobject-output-name='slider-increments'>1</p>
</body>
</html>
Thank you.
The common way to identify and select HTML tags is with either class or id.
If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="customwebpagelayout slider-increments" >
<div class="customwebpageobject slider-increments"></div>
</div>
<p class="customwebpageobject slider-increments">1</p>
</body>
</html>
Then you could select the nodes with javascript like so:
document.getElementsByClassName("slider-increments");
or if you decide to use jQuery:
$(".slider-increments");
Data attributes are more of a pain to work with:
Raw Javascript (code adapted from code in this answer):
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
//use matchingElements;
jQuery:
$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");