I'm trying to change all the titles, i.e. h1, h2, h3... to be uppercase using JavaScript.
the white cat should be THE WHITE CAT.
The method will be placed in a seperate .js file.
In JavaScript you need to get reference the object using document.getElementById or document.getElementsByClassName. After that you can style the element by accessing the style property of the object, OR just set the content to be uppercase using the built in toUpperCase() function that JavaScript has.
var header = document.getElementById("myHeader");
header.innerHTML = header.innerHTML.toUpperCase();
<h1 id="myHeader">Hello, world</h1>
HOWEVER
The easier solution is to just set a class on the whole header object, and use
.upperCaseHeader { text-transform: uppercase}
Or, if you know that all the header elements on your page will be uppercase, use;
h1,h2,h3,h4,h5 { text-transform: uppercase; }
in a CSS file.
EDIT: On OP's request the code is slightly changed to change the text to uppercase on button click
The function here will find all the tags of type h1 through h6 using getElementsByTagName and set all the text in them to uppercase, as you requested. Again, I would rather add a class with text-transform uppercase, and dynamically add and remove this class, but since you have very specific needs, I am posting this alternative solution here now.
Here is a working pen as well
function setUppercase() {
var tags = ["h1", "h2", "h3", "h4", "h5", "h6"];
for (var i = 0; i < tags.length; i++) {
var allTagsOfType = document.getElementsByTagName(tags[i]);
for (var j = 0; j < allTagsOfType.length; j++) {
allTagsOfType[j].innerText = allTagsOfType[j].innerText.toUpperCase();
}
}
}
<h1>Hello</h1>
<h2>I am going</h2>
<h3>to be</h3>
<h4>uppercase</h4>
<h5>soon</h5>
<h6>tiny text</h6>
<button onclick="setUppercase()">Set uppercase</button>
in your style.css
h2 {
text-transform: uppercase;
}
Perhaps something like this?
ref: https://www.w3schools.com/jsref/jsref_touppercase.asp
var text = $('h2').text();
var res = text.toUpperCase();
$('h2').text(res);
Edit--
Or you can do everything through JS and append the element. the `` are ES6 string literals.
var text = "The White Cat";
var res = text.toUpperCase();
var uppercase = `<h2>${res}</h2>`;
$('body').append(uppercase);
Try this inline styling:
<h2 style="text-transform: uppercase"> The White Cate </h2>
Related
I am new to jquery and was wondering how I can point one html element equal to another. I want to make it so that whenever something in the h2 tag changes, the text within the p tags will copy the change. Below is how my tags are set up within the class fc-center.
var title = $('div.fc-center h2').text();
$('.fc-center').append('<p>'+'' +'</p>');
with the html looking something like
<div class = 'fc-center'>
<h2> text text</h2>
<p> </p>
</div>
essentially what I want to do is something like this :
$('div.fc-center p').equalto $('div.fc-center h2')
But I am not quite sure how to go about it
I propose this solution:
var title = $('.fc-center').find('h2').text();
var elementsP=$('.fc-center').find('p');
if (elementsP.length > 0) {
$.each(elementsP, function(i, val) {
$(this).empty().html(title);
});
}
https://jsfiddle.net/julian9319/grc0y6qf/1/
Given this HTML:
<span data-title="Attribution">test</span>
I can use in CSS after to retrieve data-title
span:after{ content: attr(data-title); }
But what I need is the span text content, in the example above test, is it possible to get it in CSS after ?
I don't know of any way to get the inner text of an html element through CSS. Javascript will have to be used at some point, however, you could for instance use Javascript to set an attribute for your span and use CSS to read that attribute -
var elems = document.getElementsByTagName("span");
for(var i = 0; i < elems.length; i++) {
var mytext = elems[i].innerText;
elems[i].dataset.trunc = mytext;
}
span:before {
content: attr(data-trunc);
color: red;
}
<span>Some-Text</span>
<span>More-Text</span>
<span>Other-Text</span>
I need to target the last <a> element but with some conditionals.
In this case the text is created through a CMS which limit's me the option to add a class. I created a jsfiddle to show my problem. The last <a> must have an font awesome angle right in it's :after the other <a> elements not. I can't use something like :last-child a because the user/text writer doesn't have to write a link by default. There is also the possibility of another paragraph after the first. So nothing is default but the last <a> element which stands alone from the paragraph with some actual text must have an icon.
It's kinda hard to explain but the jsfiddle will explain itself so please take a look. it would be nice if there was a CSS solution. if not jQuery comes second.
Thanks in advance!
As far as I know it cannot be done using CSS alone.
How about JavaScript:
var element = document.getElementsByTagName("a");
for(var i=0; i < element.length; i++) {
var el = element[i]
var x = el.parentNode.innerText.length;
var y = el.innerText.length
if (x === y) {
el.classList.add('icon');
}
}
CSS:
.icon::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
It adds an .icon class to all <a> elements which are not wrapped inline with text in the parent element.
You can target the last p tag.
p:last-of-type a::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
I'm using a script to do a mouseover effect with images and also highlighting text in a different color using the getElementById phrase. I understand that an ID can only be used once, and if it needs to be used more than once I should use class. But there is no getElementByClass function. I have 2 areas of type that I want to highlight, one is centered, the other is left justified. Is there a way to use the same id for both styles?
<div id="georgia">
<style="text-align: center;">
<strong>Headquarters:
</strong>
</style>more text here
</div>
This is the script I am using:
<script type="text/javascript">// < ![CDATA[
function on(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="green";
};
};
function off(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="";
};
};
// ]]></script>
So what you are saying is I can replace the getElementById with getElementByClassName then it will work?
This is the format I'm using, the first part of the text (Headquarters) is not showing up, but the second part (more text here) is fine.
You need to use document.getElementsByClassName, which returns a list of the objects with that class name:
var all = document.getElementsByClassName("bar");
for(var i = 0; i < all.length; i++){
var obj = all[i];
obj.style.fontWeight = 'bold';
}
<div id="foo" class="bar">hi</div>
<div class="bar">bye</div>
<div id="bar">sup</div>
For example, I want to hilight keywords "add", "mov", etc in code like:
<code>
add 1, 2<br/>
mov 3, 4<br/>
</code>
So can I change style of specific keywords in block using just CSS, not editing HTML?
Update.
Ok, for workaround I attach to page script like:
window.onload = function()
{
var list = document.getElementsByTagName("code");
for (var i = 0; i < list.length; i++)
{
list[i].innerHTML = list[i].innerHTML
.replace(/mov/g, '<span id="keyword">mov</span>')
.replace(/set/g, '<span id="keyword">set</span>');
}
}
But, I still would be glad to find a solution in just css.
I think you'd have to wrap the words in a tag to be styled e.g.
<code>
<span class="func">add</span> 1, 2<br/>
<span class="func">mov</span> 3, 4<br/>
</code>
Then use the class added in your CSS file to style the words
.func
{
color: blue;
}
example can be seen here http://jsfiddle.net/6NAG3/
Edit: to see what a code pretty print looks like under the hood, inspect the above code in dev tools and you can see how they wrap elements