How to Get Another Element Value in Less

Is there any way to get another element value in Less?

unfortunatly it is indeed not possible. You could work with variables and do something like this however:

@box1width: 1000px;
#box1
{
    width: @box1width;
    height: 500px;
}
#box2
{
    width: @box1width - 100;
}

How do I get value of an element after clicking another?

You can use document.getElementById().value

export default function App() {
  function getText() {
    var myInputText = document.getElementById('myInput').value;
    console.log('Input text:', myInputText);
  }
  return (
    <div>
      <input id="myInput" />
      <button onClick={() => getText()}>Get Text</button>
    </div>
  );
}

Or
You can use Forms and useState Hook

export default function App() {
  const [name, setText] = useState('');

  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log(`Input text: ${name}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setText(e.target.value)}
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

Is it possible to get the value of another elements in CSS

@cinnanon is right, this can't be done with CSS alone.

You could use jQuery (javascript), although this is probably not the best practice for building a responsive site:

var adjustHeight = 1.4;

$(document).ready(function () {
    $('div').css('height', ($('div').width() * adjustHeight));
});

$(window).resize(function () {
    $('div').css('height', ($('div').width() * adjustHeight));
});

http://jsfiddle.net/philsinatra/pqz59/

CSS - Get property of other element

Internet Explorer used to support "CSS expressions" that worked (work?) much as you describe. This was never widely adopted by developers, other browsers, or standards bodies.

The general principle for why this is not a good design is called "separation of concerns", which is something the W3C in particular has always strongly promoted. The idea is that the language for defining abstract content (HTML) is completely independent of the language for defining visual appearance (CSS) and the language for dynamic behavior (JavaScript).

Although it often feels like it would make sense to put "quick" calculations directly in your CSS, rather than creating a separate script, in practice this causes a lot of problems, for example:

it is more complex to understand how JS and CSS interact; which code runs first, do JS properties reflect the calculated value or the expression itself, etc.
it duplicates work that has already been done in creating JavaScript
CSS becomes even more complicated to implement, and likely slower and buggier
Since CSS is not designed as a programming language, it will be harder (if it's even possible) to understand and control when code runs; in practice this is likely to mean expressions being recomputed more often than they need to be
CSS becomes a new vector for security issues, especially if the expression language is Turing-complete or close to it

IE's implementation reputedly had terrible performance for these reasons (like most people, I never seriously used it). It was essentially just a way to embed JS in CSS files, and as such it didn't work with scripts disabled.

You might argue that there's still a case for "simple" expressions like your example, and that this doesn't require a Turing-complete syntax. But however you define "simple", there will always come a point where your desired expression isn't "simple" enough and you have to migrate everything to JS anyway. The logical choice is to have CSS handle only constant values (making it as simple as possible to implement), and use JS for any dynamic calculation.

So the short answer is: the W3C, and individual browser vendors, considered this direction for CSS and concluded that it would do more harm than good.

ETA

Re-reading the question, it's not clear if you were talking about general expressions (like width:element1.width*2), or just straightforward symbolic values. CSS-Variable does let you use macro-type variables, which makes stylesheets easier to edit. However, it doesn't let you, say, set the height of an element to the actual rendered height of another element; that would involve a potentially complicated run-time calculation, and for the reasons mentioned above, this is better done via JS where you have control of when the calculation is made, how to account for CSS transformations, and so on.

get html element value after changing it

attr() will get the attribute of the <input>, which is the initial value of the element.

The current value of the element is a property. If we wanted to get any element property:

$('#input_one')[0].value;    
$('#input_one').prop('value');

However, jQuery has the perfect method, .val(), for you:

$('#input_one').val();

What is the difference between attribute and property?

Conditionally setting one variable's value based on another

See Mixin Guards and Ruleset Guards (aka "CSS Guards") for when usage examples. Since you need to define a variable you'll have to use mixin-based condition (rulesets do not expose their variables to an outer scope). E.g.:

.-();
.-() when (@side = right) {
    @sideOpposite: left;
}
.-() when (@side = left) {
    @sideOpposite: right;
}

(Use any suitable mixin name instead of .-, e.g. .define-opposite-side).

And with Argument Pattern Matching it can be further simplified just to:

.-(@side); 
.-(left)  {@sideOpposite: right}
.-(right) {@sideOpposite: left}

how to take a value from one div to another onclick

I had some help on this one, but bascially you store the query and then split it up so that it gets put into your div of where the value needs to be.

var params = {}, href = window.location.search, hashes = (href.length > 0) ?   href.replace('&', '&').slice(1).split('&') : [];
for (var i = 0; i < hashes.length; i++) {
var hash = hashes[i].split('=');
params[hash[0]] = hash[1];
}
$('.search input').val(params['search']);

Copy a value from one element to another

You can use callback function .text() to return the text value based on condition:

$('#btn').click(function () {
     $('.object > .header .name').text(function(i,o){
       if($.isNumeric(o)){
             return $(this).parent().next().find('.header .name').text();
         }
     })
});

Working Demo

How to make 1 css value dependent on another?

Didn't get what you exactly want to do but just keep in mind that $.css("width") returns the CSS width of an element and not the actual width of it. So if you are trying to set the sidebars width as to occupy the rest of the page width available to them you should use $.width() to read the middle div width.

$(".side_header").css("width",((1000 - $("#header_text").width())/2) + 'px');

It is even better to use .outerWidth() as CSS wise they can be different. You can find docs about them on the following pages:

http://api.jquery.com/width/

http://api.jquery.com/outerwidth/

But after all if you want to position some div horizontally this is not a really good strategy. the width() method also works somehow not satisfactory as your CSS styling might be in a way that affects the middle div width itself. Using solid percentage width is more stable than using JS to achieve this.