We Keep Coding

How to change a variable inside a style attribute

I have a div tag with a style attribute, I'm trying to change the value of the style attribute with javascript
i've tried with
document.getElementById("box").style
but still can't modify the --s variable
This is how it was originally:
Html
<div id="box" style="--s:1">
Then i took the style attribute in the js:
Html
<div id="box">
Javascript
document.getElementById("box").style="--s:1"
But still I don't know how can I modify --s with another value of another variable. thank you for your time and for any answers
EDIT:
the code is based on the first answer of this topic:
CSS 360 rotating progress radial using JS

the answer is in this post => CSS 360 rotating progress radial using JS
deg = deg + 10;
ele.style.setProperty("--v", deg+'deg');
you didn't read it correctly !
in your case this is:
document.getElementById("box").style.setProperty("--s", 1);
everything about this question is about CSS custom properties https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
I have done another sample code usage here: Html & JS rotate image 90 degrees on click

When you access the style property of a DOM object, you are accessing a CSSStyleDeclaration object. You don't set style equal to something. You access properties of that style object (left, color, top, etc.). If you assign a value to style, you wipe out the object stored in that property and instead just make the property hold the string you set it to, which breaks styling functionality.
If you want to change the value of the HTML style attribute (rather than accessing the style DOM property), use the setAttribute method:
document.getElementById("box").setAttribute("style", "--s:1");

try with attributes :
document.getElementById("box").getAttribute("style") // for reading value
document.getElementById("box").setAttribute("style", "background: red;") // for writing

RSpec and Capybara: How to get the horizontal and vertical position of an element

I have added visually hidden jump links to my website, that appear when they are focused (similar to e.g. GitHub, just press Tab once on the home page).
I want to test this behaviour with Capybara. I can't check for e.g. 'visibility: true/false', because the links are not really hidden (otherwise screenreaders would't see them), but only moved out from the viewport by absolute positioning. When they are focused, they are placed at their original position in the viewport.
So I guess I have to check the X and Y coordinate, but Capybara doesn't seem to offer a native method for getting them? Is this true? And if so, how would I get them for e.g. an element '#jump_to_content'? By executing some JavaScript?
Update
I found some inspiration here: https://content.pivotal.io/blog/testing-accessibility-with-rspec-and-capybara
But this doesn't seem to work for my configration:
link.native.location
NoMethodError: undefined method `location' for #<Capybara::Poltergeist::Node tag="a">

You are correct, Capybara does not offer a native method for getting an element's position in the page, but if you have access to jQuery you can use Capybara's page.evaluate_script method to easily determine an element's position. It would look something like this:
page.evaluate_script("$('.menu > div:nth-child(1)').offset().top")
The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent
Just note that
While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering tree and thus has a position that is undefined.

Using capybara's page.evaluate_script will allow you to execute some JavaScript and create an assertion off the return value:
expect(page.evaluate_script("document.querySelectorAll('a#jump-to-content')[0].style.top;")).to eq('-8000px')

According to this SO answer, the best way to use JavaScript to find the position of an element is to use getBoundingClientRect(); as it returns values that are relative to the viewport.
It feels more readable to me to find the element with Capybara instead of JavaScript, and then find its position. I'm using Selenium and Chrome.
link = find("a", text: "content")
link.evaluate_script("this.getBoundingClientRect().left;")
link.evaluate_script("this.getBoundingClientRect().right;")
link.evaluate_script("this.getBoundingClientRect().top;")
link.evaluate_script("this.getBoundingClientRect().bottom;")
Some browsers (like Chrome) also have:
link.evaluate_script("this.getBoundingClientRect().x;")
link.evaluate_script("this.getBoundingClientRect().y;")
link.evaluate_script("this.getBoundingClientRect().height;")
link.evaluate_script("this.getBoundingClientRect().width;")
You can also do
link.rect.y
link.rect.height
link.rect.x
link.rect.width

As per Nuri's answer, the best way you can go is asking the browser directly(headless browsers don't read css files, afaik).
However, rather than asking the style of the element, you might want to directly check its position by using offsetTop. So something like
expect(page.evaluate_script("document.querySelector('a#jump-to-content').offsetTop;")).to eq('-8000px')
If you need more control, you could also run it all in javascript:
expect(page.evaluate_script("document.querySelector('a#jump-to-content').offsetTop < document.querySelector('body').offsetTop;").to be_true

How to calculate where an element should be without moving it?

I need to change the horizontal position of an element. To do this I change its left attribute with .css('left', value). That would move the element relative to where it should be if there was no left value defined.
Now I need to recalculate the position to move the element somewhere else, to do that I need the position where the element should be if I had not changed its left attribute.
I could remove the left value and ask for its position but then the element would also move and would like to avoid that since I may make the element jump between positions.
How could I get the position where the element would be?

The element doesn't jump between position if you change the left style multiple times. As long as your function is running, there are no updates in the browser. You can safely reset the left style, get the positon, and then set a new left value.

One way would be to read the default left value of the element on DOM-ready and add it to the element as a data-* attribute on the element - let's call it data-default-left or something similar. You could then always refer to that value when you need the default value further on.
The data-* are easy to work with using jQuery's .data() method.

Setting left to 0, recalculating, and setting left to the new position would be the easiest change in your case. In my experience the browser will not repaint between css updates.
Some other options:
Use absolute positioning instead of relative. Then you're origin is consistent.
Use the jQuery UI position plugin. It lets you set the position of an element relative to another. Very useful.

how about use .data() to store this info before starting moving it? Then u just gather it back there everytime u need.

Simple. Store the initial left amount in a variable on dom load and then reference it later when you do your other calculations:
$(function () {
var $element = $("#ME_ELEMENT_ID");
var initialLeft = $element.offset().left;
// Change your left here
$element.css('left', '200px');
// initialLeft still contains the old value
});

How can I get the font size of text in elements within a webpage

edit:
The problem seems to be that the font size isnt explicitly set and is set by the css class only. so style.fontSize always returns an empty string
if there another way to return the font size?
var allMainFrameElems = parent.main.document.getElementsByTagName('*');
for (i=0; i < allMainFrameElems.length; i++){
if(allMainFrameElems[i].style.fontSize != null){
alert(llMainFrameElems[i].style.fontSize);
}
}

If the fontSize style in not explicitly set on an element (e.g. <p style="font-size:12pt;">...</p>), you won't be able to get it from anywhere. Font-sizes are most often set in your CSS classes, which are not reachable from your element's properties, and the elements do not have any font-size related properties.

In order to even come close to doing this you will need to do some tricks and will not be able to definatively determine font size. Basically you will have to manipulate the page a great deal on every element (not good) just to determine this.
See this fiddle page, especially the pixelPerEm function I tossed together very quickly. http://jsfiddle.net/MarkSchultheiss/vc8Zy/
It is not very clean at the moment and IF I get time I might try to make it better but it might give you something to start with even if it is NOT very pretty.
EDIT: basic explanation is to utilize the em css, inject an element with a known setting, calculate the pixel offset on the injection and then remove the injected element. None of that is pretty and all of it is error/bug prone or has potential for issues.

JavaScript: Truncating text based on outer object's dimensions

I want to, using JavaScript, chop the given text to fit the object in which the text resides and add "..." at the end.
For example:
JavaScript got data from 3rd party web service and needs to put the text into 200 x 300 px div. Text's length vary, so let's say it will take much more space than provided.
How to determine at which point text will break through the border and prevent that by chopping text and adding "..." at the end?

There are several jQuery plugins that can do this.

If you don't mind using the canvas element, it can be used to measure the width of the text. Here's an example:
http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

ruzee.com has a solution that uses prototype.js and a small bit of code [MIT licensed] to do what you want; demo

You may also want to look into the CSS 3 property text-overflow which also does this.
http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props
It's possible to check if the browser supports it, so you always can add a JavaScript fall back.
if (!'textOverflow' in document.createElement('div').style) {
// Use JavaScript solution here
}